Удалить все фишки сразу Jquery и css

Я использую 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