Jquery学习笔记：删除节点的操作

Posted 2020-06-14

假设如下的html代码

<div id="mydiv" style="width:100px;height:100px;border:1px solid red">
        xxx
        <div>s1</div>
        <div>s2</div>
</div>

有下面的方法可以进行删除节点操作：

$("#mydiv").remove();   //remove方法删除mydiv节点本身，以及其下的所有内容，以及子节点

$("#mydiv").empty();    //empty不删除mydiv节点本身，只清空节点下的内容（包括子节点）

$("#mydiv").children().remove();  //删除mydiv下的所有子节点。主要其下的文本不会被删除，如上面的xxx信息不会被删除

$("#mydiv div").remove();  //效果同$("#mydiv").children().remove(); 

总结下，在大部分场景下，要删除所有子节点，就用empty方法；要删除自身及子节点，就用remove方法。