Question

我有一个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>

如果用户单击带有＆＃34; btn＆＃34;类的按钮，它将删除＆＃34; ch＆＃34; 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。但是很难，因为带有类＆＃34; ch＆＃34;的div是动态创建的。

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

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

但是既然你说这些是动态生成的，我会使用事件委托，点击冒泡到祖先元素的事实，只是挂钩{ {1}}上的{1}}：
```
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);

这两者都使用:nth-child，它与其父元素中的 n 子元素匹配。（请注意，不匹配 n 匹配的子项，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>，这在所有现代浏览器和IE8都支持。

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

jquery的：

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

jsfiddle

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

Answer 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元素，然后向其注册一个点击处理程序

如何使用javascript删除div内的特定元素？

4 个答案: