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

Question

我有以下代码在我的网页中显示一堆 span 元素

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

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

如何在 jquery 中完成？

下面我试过了

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

但它不适用于所有跨度。

Answer 1

因此，您的相关代码解释为 - 当委派的 click 事件针对 .tagspans 时删除所有 spans，因此仅当您单击 [=] 时才会删除 spans 13=]

尝试使用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>

希望对您有所帮助。

Answer 2

尝试使用 detach 方法而不是 remove

Answer 3

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

希望对您有所帮助

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

Delete all the spans inside div on button click in jquery

jquery

dom-manipulation