如何删除 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 accessedvar 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">

  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(...).