1
I’m using materialize chips in my project, but I wanted to avoid this standard behavior of adding the same empty tag, for example:
How do I stop this and enter the tag only when there is at least one character?
The closest I came was:
$('.chips').on('chip.add', function(e, chip){
console.log(chip);
var chip = chip.tag;
if(!chip.trim()){
alert('CHIP VAZIO!');
//aqui gostaria de fazer algo do tipo chip.remove() porém da erro
}
});
1
Check that the text node of the chip is empty using the method .trim(). If only spaces are entered, Trim() will delete them and render null the chip.
For this you use the callback of the method onChipAdd:
$('.chips').chips({
onChipAdd: function(e, c){
if(!c.firstChild.textContent.trim()) c.remove();
}
});
The second parameter (c) returns the HTML of the created chip. The first node (firstChild) is the text. If empty remove it with .remove().
Testing:
$('.chips').chips({
onChipAdd: function(e, c){
if(!c.firstChild.textContent.trim()) c.remove();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="chips">
<input class="custom-class" placeholder="Digite as tags">
</div>I did as you said, but this error: Cannot read Property 'textContent' of Undefined
I am doing so: $('. chips'). on('chip.add', Function(e, c){ if(! c.firstChild.textContent.Trim()) c.remove(); });
I don’t know if the materialize version influences, because when I make $('.chips'). chips({)}; doesn’t recognize...
The way you’re doing is getting into the console.log(chip);?
Yes, return me this way: {tag: "ksdsd"}
Which version you are using and how you are initiating the plugin?
I start like this: $('.chips'). material_chip('data'); $('.chips'). material_chip(); I’m using the version: Materialize v0.100.2.
Use this: $(".chip:last").remove();
It worked!! Thank you so much!
Browser other questions tagged javascript html jquery materialize
You are not signed in. Login or sign up in order to post.
Amigo puts at least the version of Materialize that is used and your HTML, only with the image can not help you much
– hugocsl
@hugocsl this example is of the materialize itself.
– user133681
Materialize has many "flaws", loose ends that were not tied up - I can not say if due to lack of knowledge or if it was their goal. It seems that it was done in a hurry and in a way that was visibly pleasant. In
optionsof its element, there is the propertyonChipAdd. Try to use it to validate the added value.– Woss
On the documentation page JS, I don’t know much, but I believe someone more experienced will know how to help you https://materializecss.com/chips.html at the end of the page te os scrpts...
– hugocsl
I’ll do some research..
– user133681
@Andersoncarloswoss I did through on chip add, but I did not find any way to delete this chip through the code. Know something?
– user133681