0

I am using CSS chips for my project. For now its working fine for adding new chips and remove chips one by one. How can I modify my code to remove all existing chips at once?

<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

1
  • 4
    $(".myBTN2").on("click",function(e){ $('.chip').remove();})
    – shreyas d
    Jul 12, 2019 at 5:03

4 Answers 4

2

You can just trigger a click on their close button

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

https://jsfiddle.net/2fu3r17d/

2

You can do it using .remove()

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

https://jsfiddle.net/zLjg4d0s/

1

Find div inside customerFilter and remove.

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

Fiddle Link

1

Just select all .chip divs inside #customerFilter and remove it.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.