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

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>

如果用户单击类为“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。

Answer 1

If a user click the div with class "ch", it will delete. for example,

抱歉，我第一次回答你的问题时完全错过了这一点。

有两种方法可以做到这一点:

1. 如果您连接了一个 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);
   }
   

2. 但是既然你说这些是动态生成的，我会使用事件委托(delegate)，点击冒泡到祖先元素的事实，然后 Hook 点击#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);
   

这是委托(delegate)版本的实例:

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 都支持该功能。