I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.

Here is what I have already tried.

$('.chips').on('chip.delete', function(e, chip){
    console.log(chip);
    console.log(e);
    console.log(chip.tag);
});

None of the above is working.

With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.

I am creating chips dynamically on Materialize date select:

$('#pm_date').change(function () {
    var chipvalue = $(this).val();

    if (chipvalue !== "") {

        // checking if tag already exits
        if ($("#date_chip_select:contains(" + chipvalue + ")").length > 0) {
            alert('Date already selected');
        } else {
            var appendstring = "<div class='chip' id='date_chip_child_" + chip_id + "'>" + chipvalue + "<i class='material-icons close'>close</i></div>";
        }
    }
});

Here is the fiddle: /

I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.

Here is what I have already tried.

$('.chips').on('chip.delete', function(e, chip){
    console.log(chip);
    console.log(e);
    console.log(chip.tag);
});

None of the above is working.

With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.

I am creating chips dynamically on Materialize date select:

$('#pm_date').change(function () {
    var chipvalue = $(this).val();

    if (chipvalue !== "") {

        // checking if tag already exits
        if ($("#date_chip_select:contains(" + chipvalue + ")").length > 0) {
            alert('Date already selected');
        } else {
            var appendstring = "<div class='chip' id='date_chip_child_" + chip_id + "'>" + chipvalue + "<i class='material-icons close'>close</i></div>";
        }
    }
});

Here is the fiddle: https://jsfiddle/hq22mne4/1/

• javascript
• jquery
• html
• css
• materialize

• can you show us more code...... as it is working fine for me jsfiddle/hq22mne4 – Kiran Shinde Commented Jan 18, 2017 at 11:31
• chip.delete is not valid jQuery event. That is a bad approach. Better you can connect your chip deleting function with the code you want to run when a chip is deleted. – Hokusai Commented Jan 18, 2017 at 11:33
• i am dynamically adding chips on materialize date select – Bilal Sardar Commented Jan 18, 2017 at 11:34
• can you fiddle it? – Kiran Shinde Commented Jan 18, 2017 at 11:35
• i have updated the fiddle – Bilal Sardar Commented Jan 18, 2017 at 11:52

2 Answers 2

chips.js, which is part of materialize, doesn't seem to expose any methods for adding or removing chips programmatically. It seems to exclusively listen for an enter keydown event and then internally add the chip.

So, I stitched together a workaround that does just that. I set potential chip's value within your onchange event:

$("#datechips").find('input').val($(this).val());

And create the chip when date picker is closed:

$('.datepicker').pickadate({
    selectMonths: true,
    selectYears: 15,
    onClose: function() {
        // add chip via filling the input and simulating enter
        $("#datechips").find('input').trigger({ type : 'keydown', which : 13 });
},
});

It may not be ideal, but you should be able to tailor this going forward.

https://jsfiddle/j3ej8240/

I've also had a lot of trouble working this out. This is how I capture the add and delete chip events without using jQuery:

function chipDeleted(e, data) {
    console.log("Chip was deleted with text: " + data.childNodes[0].textContent);
}

function chipAdded(e, data) {
    console.log("Chip was added with text: " + data.childNodes[0].textContent);
}


//
document.addEventListener("DOMContentLoaded", function (e) {
    console.log("DOM fully loaded and parsed");
    var firstTag = "Initial Tag";
    var elems = document.querySelectorAll('.chips');
    var instances = M.Chips.init(elems, {
        data:[{
              tag: firstTag
          }],
        autopleteOptions: {

            limit: Infinity,
            minLength: 1
        },
        placeholder: "No search...",
        onChipDelete: function (e, data) { chipDeleted(e, data) },
        onChipAdd: function (e, data) { chipAdded(e, data) }
    });
});

And my HTML part is like this:

<body>
    <div class="chips search-history"></div>

    <script src="https://cdnjs.cloudflare./ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

</body>