jquery remove() 在纯 js 中等效？答案

【问题标题】：jquery remove() equivalent in pure js?jquery remove() 在纯 js 中等效？
【发布时间】：2019-10-22 02:41:23
【问题描述】：

我尝试删除 jquery 代码并将其转换为纯 js

//old code in jquery
const item = $('[type=item]')
item.text() === '' && $(item).remove()

//new code without jquery
const item = document.querySelector('[type="item"]')
item.innerText === '' && item.parentNode.removeChild(item) // this is problem

但是我使用第二个代码块得到了不同的行为，我想我错误地使用了 removeChild。

【问题讨论】：

或许你可以试试item.parentElement.removeChild？
您能描述一下您在两种方法之间观察到的不同行为吗？

标签： javascript jquery ecmascript-6

【解决方案1】：

不同之处在于jQuery 删除了与选择器匹配的所有项，而纯JS（在您的版本中）删除了第一个找到的 节点。要删除 all，您可以执行以下操作。

const item = document.querySelectorAll('[type=item]');
for(let i=0,it;it=item[i];++i){
    it.innerText === '' && it.parentNode.removeChild(it);
}

【讨论】：

【解决方案2】：

使用现代 javascript，这应该可以工作：

仔细看——这不是 jQuery

//const $ = document.querySelector.bind(document); //<== not needed in _this_ example
const $$ = document.querySelectorAll.bind(document);
$$('[type=item]').forEach( itm => itm.parentNode.removeChild(itm) );

将 $ 和 $$ 行放在您的 javascript 项目的顶部，它应该可以节省您的一些输入 - 并混淆 jQuery-ites。

参考资料：

https://plainjs.com/javascript/selecting/select-dom-elements-by-css-selector-4/

【讨论】：

【解决方案3】：

function remove(element) {
element.parentNode.removeChild(element); 
}

并将其用作

<div>
<a href="#" onClick="remove(this.parentNode)">...</a>
</div>

【讨论】：