[英]javascript remove div onclick
with pure javascript, I need to remove a li
on click the span
. 使用纯JavaScript,我需要在单击span
上删除一个li
。
remove
I want to remove its div. 通过单击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>
Don't pollute Object
. 不要污染Object
。 You don't need this function in every object. 您不需要在每个对象中都使用此功能。 Create an separate function and use remove()
, not removeChild()
. 创建一个单独的函数并使用remove()
,而不要使用removeChild()
。
The ChildNode.remove() method removes the object from the tree it belongs to. ChildNode.remove()方法从其所属的树中删除该对象。
But remove doesn't work in every browser. 但是删除并不是在所有浏览器中都起作用。 It is a new function. 这是一个新功能。 So I suggest you two solutions. 所以我建议您两个解决方案。
With 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>
With removeChild()
. 使用removeChild()
。
Why 2 parentNodes? 为什么要有2个parentNode?
Because the first is the <span>
, but you need li
因为第一个是<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>
Try following solution. 尝试以下解决方案。
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>
It would be better to just define a simple function instead of changing the object
prototype, as @Satpal suggested. 最好只定义一个简单函数,而不要像@Satpal建议的那样更改object
原型。
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>
You want to remove the < li > element that contains the "remove" option? 您要删除包含“删除”选项的<li>元素吗? If so, that's how to do it. 如果是这样,那就是这样做的方法。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.