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

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

短信
第一章
第2章
第3章
第4章

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

短信
第一章
第2章
第3章

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

---

因此，我想删除一个只有className的div。

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

//如果.ch元素有另一个类或另一个子元素，则此解决方案将不起作用
document.querySelector（“#listing”）.addEventListener（'click'，函数（e）{
if（e.target.className='ch'）{//或if（e.target.classList.contains（'ch'））{
this.removeChild（e.target）
}
})

短信
第一章
第2章
第3章
第4章

只有当您的加价与您给出的一样准确时，以下解决方案才有效

//如果.ch元素有另一个类或另一个子元素，则此解决方案将不起作用
document.querySelector（“#listing”）.addEventListener（'click'，函数（e）{
if（e.target.className='ch'）{//或if（e.target.classList.contains（'ch'））{
this.removeChild（e.target）
}
})

短信
第一章
第2章
第3章
第4章

如果用户单击类为“ch”的div，则会删除。例如

对不起，我第一次回答你的问题时完全没有听到这个

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

如果您连接了一个

单击

处理程序，在对该处理程序的调用中，

此

将引用已单击的元素。因此：

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

以下是委派版本的一个实例：

document.getElementById（“列表”）.addEventListener（“单击”，函数（e）{
//查找.ch，从单击起源的元素开始。
//如果存在任何元素的可能性，则需要此循环
//*在*的.ch元素中，例如'em'或'strong'或'span'。
var ch=e.target；
while（ch&&！ch.className.match（/\bch\b/））{
ch=ch.parentNode；
}
如果（ch）{
ch.parentNode.removeChild（ch）；
}
}，false）；

短信
第一章
第2章
ch 3
第4章

如果用户单击类为“ch”的div，则会删除。例如

对不起，我第一次回答你的问题时完全没有听到这个

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

如果您连接了一个

单击

处理程序，在对该处理程序的调用中，

此

将引用已单击的元素。因此：

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

以下是委派版本的一个实例：

document.getElementById（“列表”）.addEventListener（“单击”，函数（e）{
//查找.ch，从单击起源的元素开始。
//如果存在任何元素的可能性，则需要此循环
//*在*的.ch元素中，例如'em'或'strong'或'span'。
var ch=e.target；
while（ch&&！ch.className.match（/\bch\b/））{
ch=ch.parentNode；
}
如果（ch）{
ch.parentNode.removeChild（ch）；
}
}，false）；

短信
第一章
第2章
ch 3
第4章

短信
第一章
第2章
第3章
第4章
简单地使用每个函数获取所有div
$（'.ch'）。单击（函数（）{
如果（$（this）.text（）=='ch1'）{
$（this.remove（）；
}
});
输出：
短信
第2章
第3章
第4章

短信
第一章
第2章
第3章
第4章
简单地使用每个函数获取所有div
$（'.ch'）。单击（函数（）{
如果（$（this）.text（）=='ch1'）{
$（this.remove（）；
}
});
输出：
短信
第2章
第3章
第4章

如果它是一个按钮呢？@PinasDeRadio:我想你是在问选项2中的循环。如果是这样：这取决于按钮的类型。如果它是

，你不需要循环，因为它们不能有子元素。如果它是

，你需要。如果按钮是点击ch 3的那部分？@PinasDeRadio:如果你是说

xxxx

或

，是的，您需要循环，因为单击源于按钮，您需要找到它的祖先

div class=“ch”

元素。只需尝试一下，看看什么是有效的。我可以让它运行吗？如果用户单击delete div，它将删除整个“ch”div？如果它是一个按钮呢？@PinasDeRadio：我想你是在问选项2中的循环。如果是这样：这取决于按钮的类型。如果它是

，你不需要循环，因为它们不能有子元素。如果它是

，你需要。如果按钮是单击ch 3的那一部分？@PinasDeRadio：如果你的意思是

xxxx

或

，是的，您需要循环，因为点击源于按钮，您需要找到它的祖先

div class=“ch”

元素。只需尝试一下，看看什么是有效的。我能不能让用户点击delete div，它就会删除整个“ch”div？

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

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

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