原生JS与jQuery获取父元素及删除子元素的实现对比

DOM对象与jQuery对象的区别

使用 document.getElementById("id") 获取的元素为原生 DOM 对象，后续操作需调用 JavaScript 原生方法。

使用 $("#id") 获取的元素为 jQuery 对象，后续操作需调用 jQuery 封装的方法。

遍历元素的方法对比

首先需要对获取到的对象集合进行遍历处理。

在 JavaScript 中，可以通过 for 循环遍历，语法为 for(var i=0; i<obj.length; i++)，并通过 obj[i] 访问当前遍历到的具体元素。

在 jQuery 中，可以使用 $("#id").each(function(){} 进行遍历，在回调函数内部通过 $(this) 获取当前元素。

获取父元素与删除子元素实现

接下来，根据遍历结果获取满足条件的元素的父元素。

JavaScript 中，通过 obj[i].parentNode 属性获取父元素节点。

jQuery 中，通过 $(this).parent() 方法获取父元素。

成功获取父元素后，即可对该父元素执行删除其子元素的命令。

JavaScript 中，调用 o.removeChild(obj[i]) 方法移除指定的子元素。

jQuery 中，调用 o.empty() 方法清空父元素内的所有子节点。