javascript 删除 div onclick

Question

使用纯 javascript，我需要在单击 span 时删除 li。

• 通过单击删除，我想删除它的 div。

Object.prototype.remove = function(){
    this.parentNode.removeChild(this);
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

Answer 1

不要污染Object .您不需要在每个对象中都使用此功能。创建一个单独的函数并使用 remove() , 不是 removeChild() .

ChildNode.remove() 方法从它所属的树中移除对象。

但删除并不适用于所有浏览器。这是一项新功能。因此，我建议您使用两种解决方案。

与 remove()

var remove = function(){
    this.parentNode.remove();
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

与 removeChild() .

为什么有 2 个父节点？

因为第一个是 <span> , 但你需要 li

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

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
  button[i].addEventListener('click', remove, false);
}

<ul>
  <li>List item one<span> remove</span></li>
  <li>List item two<span> remove</span></li>
  <li>List item three<span> remove</span></li>
  <li>List item four<span> remove</span></li>
  <li>List item five<span> remove</span></li>
  <li>List item six<span> remove</span></li>
</ul>