Question

我正在为项目使用CSS芯片。目前，它可以正常工作以添加新芯片并一一移除芯片。如何修改代码以一次删除所有现有芯片？

<div id="basic" class="section scrollspy">
  <button class="myBTN">Add New</button>
  <button class="myBTN2">Delete All</button>
  <div class="input-field">    
    <div id="Filter" class="chips chips-autocomplete chips-placeholder"></div>
  </div>
</div>


$(function() {

  var x = 1;
  $(".myBTN").on("click",function(e){
    var text = $(this).text()+x;
    x++;
    var e = jQuery.Event("keydown");
    e.which = 13; // # Some key code value
    $(".chips input").val(text);
    $(".chips input").trigger(e);
  });

  $(".myBTN2").on("click",function(e){     
  });

  $('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });

  $('.chips').material_chip();
});

JSFiddle

Answer 1

您只需触发其关闭按钮的点击即可

$(".myBTN2").on("click",function(e){
    $('.chip .close').click();
});

https://jsfiddle.net/2fu3r17d/

Answer 2

您可以使用.remove（）

$(".myBTN2").on("click",function(e){
    $(".chips .chip").remove();
});

https://jsfiddle.net/zLjg4d0s/

Answer 3

在div内找到customerFilter，然后删除。

 $(".myBTN2").on("click", function(e) {
    $('#customerFilter').find('div').remove();
});

Fiddle Link

Answer 4

只需选择#customerFilter中的所有.chip div并将其删除。

$(".myBTN2").on("click",function(e){
  $('#customerFilter .chip').remove();  
});

一次删除所有筹码Jquery和CSS

4 个答案: