javascript删除div onclick

Question

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

• 点击remove我想删除其div。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不要污染Object。你不需要在每个对象中都有这个功能。创建单独的函数并使用remove()，而不是removeChild()。

ChildNode.remove（）方法从它所属的树中删除对象。

但删除并不适用于每个浏览器。这是一项新功能。所以我建议你两个解决方案。

使用remove()

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

removeChild()。

为什么有2个parentNodes？

因为第一个是<span>，但您需要li

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试以下解决方案。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

最好定义一个简单的函数，而不是像@Satpal建议的那样更改object原型。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您要删除＆lt; li>包含＆＃34;删除＆＃34;的元素选项？ 如果是这样，那该怎么做。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;