原生js以及jQuery删除节点

原生js中

原生js中想要删除一个元素节点，必须要找到它对应的父亲节点，这样才能够把子节点删除掉。利用的语法函数是: node.removeChild()方法。
当然每次寻找父元素可能会很麻烦需要借助属性parentNode属性来寻找父节点，childNode.parentNode.removeChild(childNode):

<div class="father">
    <ul class="uls">
        <li>无序列表1li>
        <li>无序列表2li>
    ul>
    <ol class="ols">
        <li>有序列表1li>
        <li>有序列表2li>
        <li>有序列表3li>
    ol>
div>

let divs = document.querySelector('.father'); // 寻找父亲节点
let child1 = document.querySelector('.uls');  // 寻找要删除的节点
divs.removeChild(child1); // 执行删除语句

child1.parentNode.removeChild(child1); // 可以使用这一句代替 1 3两句

jQuery中删除节点的方式以及区别

先说结论：知道的大佬不用再看了

empty、remove和detach的区别 都是函数
1.empty用来清空元素内部内容，remove和detach用来删除元素本身
2.remove删除的元素是彻底删除，包括元素携带的事件一起消失，再次追加回该元素，事件无法带回
3.detach删除的元素是彻底删除，但是元素携带的事件不会消失，再次追加回该元素，事件一起带回

上代码

<button type="button" id="empty">empty删除button>
<button type="button" id="remove">remove删除button>
<button type="button" id="detach">detach删除button>
<div id="d1" style="height:100px;width:100px;background-color:pink">
    <ul>
        <li>选项1li>
        <li>选项2li>
        <li>选项3li>
    ul>
div>

$(function() {
     
    $("#d1").click(function() {
     
        console.log("点击有效~~");
    });
});

简单描述一下：
上面有三个不同的按钮，empty，remove,detach对应不同的删除形式；下方有一个盒子里面有一个无序列表，给盒子添加单击事件点击时输出一段信息。想在点击按钮时看看盒子里面内容是否能够删除，将删除的元素再添加回来看看单击事件是否还会存在……

$(function() {
     
    $("#d1").click(function() {
     
        console.log("点击有效~~");
    });

    $("#empty").click(function() {
     
        let d1_empty = $("#d1").empty();
        console.log(d1_empty);
    });
    $("#remove").click(function() {
     
        let d1_remove = $("#d1").remove();
        console.log(d1_remove);
        setInterval(function() {
     
            $("body").append(d1_remove);
        }, 2000);
    }); // 为了方便看 删除后经过2s再给添加回来
    $("#detach").click(function() {
     
        let d1_detach = $("#d1").detach();
        console.log(d1_detach);
        setInterval(function() {
     
            $("body").append(d1_detach);
        }, 2000);
    });
});

empty()

1. 里面所有元素清除
2. 单击事件保留
3. 返回值是被操作标签的jq对象

remove()

1. 删除元素本身
2. 单击时机被删除，再次添加这个元素回来，对应绑定的事件也回不来了.(一旦错过就不在)
3. 返回值也是被操作的jq对象

detach()

1. 会删除元素本身
2. 再次添加这个元素回来，绑定的事件会回来。

小技巧：引入jQ网络地址，这样就不用每次引入了 参考

https://www.jq22.com/jquery/jquery.html