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

我不能直接将remove函数绑定到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

$input.data('tagify')将不能工作，并将返回undefined，因为您没有使用jQuery来初始化文档中的说明

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

以上是所有jQuery插件在应用到DOM节点时的用法--首先实例化一个jQuery对象，然后将jQuery插件应用于它。这样做之后，data属性tagify将可用：$input.data('tagify')

相反，您使用new Tagify(...)像普通版本一样初始化它。

Answer 3

在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>

​