javascript删除div onclick

Question

纯JavaScript，我需要删除li上点击span。

• 通过点击remove我想删除它的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>

Answer 2

尝试以下解决方案。

Object.prototype.remove = function(){ 
 
    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>

这将是最好只定义一个简单的函数，而不是改变object原型，作为@Satpal建议的。

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>

Answer 3

你要删除的< LI>包含 “删除” 选项元素？ 如果是这样，那就是怎么做。

Object.prototype.remove = function(){ 
 
    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>