如何使用javascript删除div中的特定元素？答案

【问题标题】：How to delete a specific element inside a div using javascript?如何使用javascript删除div中的特定元素？
【发布时间】：2015-04-06 19:29:03
【问题描述】：

我有一个html代码，

<div id="listing">
Text Message 
<div class="ch">ch 1</div>
<button class="btn" />
<div class="ch">ch 2</div>
<button class="btn" />
<div class="ch">ch 3</div>
<button class="btn" />
<div class="ch">ch 4</div>
<button class="btn" />
</div>

如果用户单击类为“btn”的按钮，它将删除“ch” div 和相应的按钮。例如，

<div id="listing">
Text Message 
<div class="ch">ch 1</div>
<button class="btn" />
<div class="ch">ch 2</div>
<button class="btn" />
<div class="ch">ch 3</div>
<button class="btn" />
</div>

我尝试添加 div 的 ID。但是这很困难，因为“ch”类的 div 是动态创建的。

所以我想删除一个只有 className 的 div。

【问题讨论】：

标签： javascript html

【解决方案1】：

如果用户单击“ch”类的 div，它将被删除。例如，

对不起，我第一次回答你的问题时完全错过了这个。

您可以通过两种方式做到这一点：

如果您连接了 click 处理程序，在对处理程序的调用中，this 将引用被单击的元素。所以：

var list = document.querySelectorAll("#listing .ch");
var n;
for (n = 0; n < list.length; ++n) {
    list[n].addEventListener("click", function() {
        this.parentNode.removeChild(this);
    }, false);
}

但既然你说这些是动态生成的，我会使用事件委托，即点击冒泡到祖先元素的事实，然后将click 挂上#listing:

document.getElementById("listing").addEventListener("click", function(e) {
    // Find the .ch, starting with the element the click originated in
    var ch = e.target;
    while (ch && !ch.className.match(/\bch\b/)) {
        ch = ch.parentNode;
    }
    if (ch) {
        ch.parentNode.removeChild(ch);
    }
}, false);

这是一个委托版本的实例：

document.getElementById("listing").addEventListener("click", function(e) {
  // Find the .ch, starting with the element the click originated in.
  // You need this loop if there's any possibility of any elements
  // *within* the .ch elements, such as `em` or `strong` or `span`.
  var ch = e.target;
  while (ch && !ch.className.match(/\bch\b/)) {
    ch = ch.parentNode;
  }
  if (ch) {
    ch.parentNode.removeChild(ch);
  }
}, false);

<div id="listing">
  Text Message
  <div class="ch">ch 1</div>
  <div class="ch"><em>ch 2</em></div>
  <div class="ch"><strong>ch 3</strong></div>
  <div class="ch">ch 4</div>
</div>

原始答案错过了相关点！

在任何现代浏览器上，您都可以这样做：

document.querySelector("#listing div:nth-child(3)").remove();

活生生的例子：

setTimeout(function() {
  document.querySelector("#listing div:nth-child(3)").remove();
}, 500);

<div id="listing">
Text Message 
<div class="ch">ch 1</div>
<div class="ch">ch 2</div>
<div class="ch">ch 3</div>
<div class="ch">ch 4</div>
</div>

在略您可能需要的旧浏览器上：

var element = document.querySelector("#listing div:nth-child(3)");
element.parentNode.removeChild(element);

活生生的例子：

setTimeout(function() {
  var element = document.querySelector("#listing div:nth-child(3)");
  element.parentNode.removeChild(element);
}, 500);

<div id="listing">
Text Message 
<div class="ch">ch 1</div>
<div class="ch">ch 2</div>
<div class="ch">ch 3</div>
<div class="ch">ch 4</div>
</div>

它们都使用:nth-child，它匹配其父元素中的第n个子元素。（请注意，它不匹配第 n 个匹配子元素，div 只是为了清楚起见。）

他们还使用querySelector，它在所有现代浏览器和 IE8 上都受支持。

【讨论】：

如果是按钮呢？
@PinasDeRadio：我假设您是在询问选项 2 中的循环。如果是这样：这取决于按钮的类型。如果是<input type="button">，则不需要循环，因为它们不能有子元素。如果是<button>，你可以。
如果按钮是点击ch 3的那个部分？
@PinasDeRadio：如果您的意思是<div class="ch"><button>xxxx</button></div> 或<div class="ch"><input type="button" value="xxxx"></div>，是的，您需要循环，因为点击源自按钮，您需要找到其祖先div class="ch" 元素。试一试，看看有什么用。
我能做到吗
那么如果用户点击删除 div，它将删除整个“Ch " div?

【解决方案2】：

    <div id="listing">
       Text Message 
       <div class="ch">ch 1</div>
       <div class="ch">ch 2</div>
       <div class="ch">ch 3</div>
      <div class="ch">ch 4</div>
    </div> 
    Simple use each function to get all divs
        $('.ch').click(function(){
          if($(this).text() == 'ch 1'){
            $(this).remove();
          }
        });
output:
<div id="listing">
       Text Message 
       <div class="ch">ch 2</div>
       <div class="ch">ch 3</div>
       <div class="ch">ch 4</div>
    </div>

【讨论】：

【解决方案3】：

<div id="listing">
Text Message 
<div class="ch">ch 1</div>
<div class="ch">ch 2</div>
<div class="ch">ch 3</div>
<div class="ch">ch 4</div>
</div>

jquery:

$(document).on('click','.ch',function(){
   $(this).remove();
});

jsfiddle

【讨论】：

【解决方案4】：

仅当您的标记与您给出的完全一致时，以下解决方案才有效。

//This solution will not work if the .ch element has another class or has another descendant element
document.querySelector('#listing').addEventListener('click', function(e) {
  if (e.target.className = 'ch') { //or if(e.target.classList.contains('ch')){
    this.removeChild(e.target)
  }
})

<div id="listing">
  Text Message
  <div class="ch">ch 1</div>
  <div class="ch">ch 2</div>
  <div class="ch">ch 3</div>
  <div class="ch">ch 4</div>
</div>

另一种选择是遍历所有 ch 元素，然后向其注册一个点击处理程序

【讨论】：