Chips don&#38;#039;t delete

Topic: Chips don't delete

ashleyww93 free asked 6 years ago

Hi, Using your example: $('.chips').on('chip.delete', function(e, chip){ // you have the deleted chip here }); The function is never called when I click the icon. I am using the latest version of Font Awesome (because I have a licence and I needed the new icons) and I believe this is the issue as I am using the FA SVG with JS option. Please advise how I can use this correctly.

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

What is the reason that You are adding chips inside 'md-form'? Regards

ashleyww93 free commented 6 years ago

Because im using it to display data inline with a form. So I used md-form to allow an icon inline like the rest of the form inputs

Mikołaj Smoleński staff commented 6 years ago

You should take it out of the md-form and make it behave inline otherwise.

Add comment

ashleyww93 free answered 6 years ago

0 0 Best answer

<pre><div class="col-md-12">
 <div class="md-form">
 
 <div id="chipsTest" class="chips chips-placeholder"></div>
 <label for="chipsTest">Extra Curricular Activity</label>
 </div>
</div>

</pre>
<pre>$('.chips').on('chip.add', function(e, chip){
 // you have the added chip here
 var a = 1;
});

$('.chips').on('chip.delete', function(e, chip){
    // you have the deleted chip here
    var b = 1;
});

When rendered, I get this HTML:

Please insert min. 20 characters.

<div class="col-md-12">
    <div class="md-form">
        <i class="fal fa-info-circle prefix"></i>
        <div id="chipsTest" class="chips chips-placeholder"></div>
        <label for="chipsTest">Extra Curricular Activity</label>
    </div>
</div>

$('.chips').on('chip.add', function(e, chip){
    // you have the added chip here
    var a = 1;
});

$('.chips').on('chip.delete', function(e, chip){
    // you have the deleted chip here
    var b = 1;
});


When rendered, I get this HTML:

<div id="chipsTest" class="chips chips-placeholder"> <div class="chip"> Tag 1 <svg class="svg-inline--fa fa-times fa-w-12 close" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> <path fill="currentColor" d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path> </svg> <!-- <i class="close fa fa-times"></i> --> </div> <div class="chip"> Tag 2 <svg class="svg-inline--fa fa-times fa-w-12 close" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> <path fill="currentColor" d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path> </svg> <!-- <i class="close fa fa-times"></i> --> </div> <div class="chip"> Tag 3 <svg class="svg-inline--fa fa-times fa-w-12 close" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> <path fill="currentColor" d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path> </svg> <!-- <i class="close fa fa-times"></i> --> </div> <input class="input" placeholder=""> </div>

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Hi, Using the latest version could be the reason of such problem. Please share Your code with us as an answer. We'll try to fix Your issue. Regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ashleyww93

47Support score
7Questions 9Answers 0Snippets