javascript - How to delete tags in Tagify plugin? - Stack Overflow

admin管理员组

文章数量:1326612

I need to handle a dynamic button that will remove all the Tagify tags. The documentation for deleting all tags with jQuery is here:

In the documentation it says:

// get the Tagify instance assigned for this jQuery input object so its methods could be accessed
var jqTagify = $input.data('tagify');

// bind the "click" event on the "remove all tags" button
$('.tags-jquery--removeAllBtn').on('click', jqTagify.removeAllTags.bind(jqTagify))

With this in mind, I have tried without success the following (can be seen here in JSFiddle):

$(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test').tagify();    
    $input.removeAllTags();
});

I also tried to create an approach closer to what the documentation states:

$(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test');
    var _tagify = $input.data('tagify');

   _tagify.removeAllTags();
});

But in both situations the error is:

Cannot read property 'removeAllTags' of undefined

I can't bind directly the remove function to a DOM element because buttons will be created on-the-fly.

I need to handle a dynamic button that will remove all the Tagify tags. The documentation for deleting all tags with jQuery is here: https://yaireo.github.io/tagify/#section-jquery

In the documentation it says:

// get the Tagify instance assigned for this jQuery input object so its methods could be accessed
var jqTagify = $input.data('tagify');

// bind the "click" event on the "remove all tags" button
$('.tags-jquery--removeAllBtn').on('click', jqTagify.removeAllTags.bind(jqTagify))

With this in mind, I have tried without success the following (can be seen here in JSFiddle):

$(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test').tagify();    
    $input.removeAllTags();
});

I also tried to create an approach closer to what the documentation states:

$(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test');
    var _tagify = $input.data('tagify');

   _tagify.removeAllTags();
});

But in both situations the error is:

Cannot read property 'removeAllTags' of undefined

I can't bind directly the remove function to a DOM element because buttons will be created on-the-fly.

• javascript
• jquery
• tagify

Share Improve this question Follow asked Oct 7, 2020 at 14:58 LinesofcodeLinesofcode 5,9231414 gold badges7171 silver badges131131 bronze badges 2

• try jsfiddle/zah2oLkr – Cuong Le Ngoc Commented Oct 7, 2020 at 15:07
• @CuongLeNgoc I can't use the variable tagify because the way I have my code, the plugin is loaded in a different file. I need to delete the values without accessing the variable tagify. – Linesofcode Commented Oct 7, 2020 at 15:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

It works for me this way

 var prueba = '"Lic","ffff","asdasd","asdd","asd","dsdsd"';
 var $input = $('input[name=tags]');
 var jqTagify = $input.data('tagify');
 jqTagify.addTags(prueba);
 jqTagify.removeAllTags();

$input.data('tagify') will not work and will return undefined because you did not initialize Tagify using jQuery per the instructions in the docs:

$('#input-test').tagify()

The above is how all jQuery plugins are used when applied to a DOM node - you first instantiate a jQuery object and then apply the jQuery plugin on it. Once you do it like that, the data property tagify will be available: $input.data('tagify')

Instead, you initialized it like the vanilla version, using new Tagify(...).

in jquery:

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/tagify/3.16.3/tagify.min.css" />
<input name='tags-jquery' id="input-test" >
<button id="btn-test">
  Delete
</button>


<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tagify/3.16.3/jQuery.tagify.min.js"></script>

<script>
var $el = $('#input-test').tagify()
var jqTagify = $el.data('tagify')
var btn = $('#btn-test')
btn.on('click', jqTagify.removeAllTags.bind(jqTagify))
</script>

本文标签： javascriptHow to delete tags in Tagify pluginStack Overflow