如何删除 Tagify 插件中的标签？

Question

我需要处理一个将删除所有 Tagify 标签的动态按钮。使用 jQuery 删除所有标签的文档在这里： https: //yaireo.github.io/tagify/#section-jquery

在文档中它说：

// 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))

考虑到这一点，我尝试了以下但没有成功（可以在JSFiddle中看到）：

$(document).on('click', '#btn-test', function()

{

    var $input = $('#input-test').tagify();    

    $input.removeAllTags();

});

我还尝试创建一种更接近文档所述的方法：

$(document).on('click', '#btn-test', function()

{

    var $input = $('#input-test');

    var _tagify = $input.data('tagify');

   _tagify.removeAllTags();

});

但在这两种情况下，错误都是：

无法读取未定义的属性“removeAllTags”

我无法将删除函数直接绑定到 DOM 元素，因为按钮将即时创建。

Answer 1

它以这种方式对我有用 var prueba = '"Lic","ffff","asdasd","asdd","asd","dsdsd"'; var $input = $('input[name=tags]'); var jqTagify = $input.data('tagify'); jqTagify.addTags(prueba); jqTagify.removeAllTags();

Answer 2

在 jquery 中：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/3.16.3/tagify.min.css" /><input name='tags-jquery' id="input-test" ><button id="btn-test">&nbsp; Delete</button><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/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>

Answer 3

$input.data('tagify')将不起作用并将返回，undefined因为您没有按照文档中的说明使用 jQuery 初始化 Tagify ：$('#input-test').tagify()以上是所有 jQuery 插件在应用于 DOM 节点时的使用方式——您首先实例化一个 jQuery 对象，然后在其上应用 jQuery 插件。一旦你这样做了，该data属性tagify将可用：$input.data('tagify')相反，你像普通版本一样初始化它，使用new Tagify(...).