javascript - 一次删除所有芯片 Jquery 和 css

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/