原生js以及jQuery删除节点

原生js中

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

<div class="father"><ul class="uls"><li>无序列表1</li><li>无序列表2</li></ul><ol class="ols"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></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>选项1</li><li>选项2</li><li>选项3</li></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()

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

remove()

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

detach()

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

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

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

原生js以及jQuery删除节点相关推荐

原生JS与Jquery删除iframe并释放内存(IE)
当项目以tab页签方式打开多个iframe窗口时,关闭tab页签同时也需要关闭iframe并释放内存资源,主要是针对IE浏览器. 原生js /** * 销毁iframe,释放iframe所占用的内存. ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
html用js添加兄弟节点,jquery 删除节点添加节点找兄弟节点的简单实现
$().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意当前节点会被删除 $(). ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
原生js和jquery常用的DOM操作
前言将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
前端基础 -JQuery 删除节点
JQuery 删除节点删除节点有两个关键字:empty 清空.remove:移除案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 T ...
原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
span的取值与赋值（原生js与jquery） - 对比篇
文章目录关于span的取值与赋值 - 原生js与jquery代码一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...
原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...