在jquery中单击按钮时删除div内的所有跨度答案

【问题标题】：Delete all the spans inside div on button click in jquery在jquery中单击按钮时删除div内的所有跨度
【发布时间】：2016-03-07 07:41:38
【问题描述】：

下面的代码在我的网页中显示了一堆 spans 元素

 <div id="tags" style="border:none;width:370px;">
   {% for category in AllCategories %}            
   <span class="tag" id="4">{{ category.sname }}</span>
   {% endfor %}
 <div>

这是在网页 (python) 中获取数据的 Django 表示法，我有一个按钮，当我单击该按钮时，应该删除我的 div 内的所有跨度 (id=tags)。

如何在 jquery 中做到这一点？

我在下面尝试过

 $('#tags').on('click','.tag',function(){ 
     $(this).remove();
 });

但它不适用于所有跨度。

【问题讨论】：

您似乎在循环创建相同的 ID ？
不应该是#tags而不是#tags1
$("#tags1") 不存在，因此$(this) 指的是您尝试删除的跨度以外的其他内容
抱歉，打错字了……它的“标签”
jQuery how to remove all <span> tags from a <div>?的可能重复

标签： jquery dom-manipulation

【解决方案1】：

因此，您有问题的代码可以解释 - 当委派的 click 事件针对 .tagspans 时，删除所有 spans，因此只有在您单击 spans 时才会删除跨度

尝试使用remove()：

$(function(){
    $('#tags').on('click', function(){ 
        $(this).find('.tag').remove()
    });
});

#tags{
  background-color: green;
}
span{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
  <span class='tag'>Span 1</span><br/>
  <span class='tag'>Span 2</span><br/>
  <span class='tag'>Span 3</span><br/>
  <span class='tag'>Span 4</span>
</div>

希望这会有所帮助。

【讨论】：

谢谢扎卡里亚！现在正在检查。
$('#tags .tag').remove(); 很贵，不如使用find 并且已经有参考，所以$(this).find('.tag').remove();

【解决方案2】：

$(document).ready(function(){ 
       $('#tags').on('click', function(){ 
         $(this).find('span.tag').remove();
       });
    });

希望对你有帮助

【讨论】：

closest 向上遍历，使用find 代替，因为spans 在div 内部
是的，这是个错误。

【解决方案3】：

尝试使用 detach 方法而不是 remove

【讨论】：