js实现内容增删操作

初学js是不是特别想知道，如何做到页面的增删功能呢？接下来，就让我们往下学吧！

• body代码：

<textarea name="" id="say" cols="40" rows="5"></textarea>
    <input type="submit" value="发表说说" id="count">
    <h2>说说列表：</h2>
    <div class="con">
        <ul></ul>
    </div>

• js代码：

<script src="../JS/jquery-3.3.1.min.js"></script>
    <script>
        var num=1;
        // 给发表说说一个点击事件
        $("#count").click(function(){
            // 获取说说内容
            var says=$("#say").val();
            if(says==""){
                alert("不能为空！");
                // $("#say").focus();
                $("#say").css("border","1px solid red");
                return;
            }
            else{
                // 从下至上  prependTo()
                // $("<li>"+num+"楼"+says+"</li><a href='#' id='del'>删除该条说说</a>").prependTo(".con ul");
                // 从上至下  appendTo()
                // a标签在li标签里
                $("<li>"+num+"楼"+says+"<a href='#' οnclick='del(this)'>删除该条说说</a></li>").appendTo(".con ul");
                // a标签在li标签外
                // $("<li>"+num+"楼"+says+"</li><a href='#' οnclick='del(this)' class='elt'>删除该条说说</a>").appendTo(".con ul");
                $("#say").val("");
                num++;
            }
        });
        
        // 给删除说说做一个点击事件
        function del(obj){
            if(confirm("是否删除该行？")){
                // a标签在li标签里
                $(obj).parent().remove();
                // a标签在li标签外
                // $(obj).prev().remove();
                // $(".elt").remove();
            }
        }
    </script>

• 效果图：