admin管理员组文章数量:1327061
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.
Share Improve this question asked Oct 7, 2020 at 14:58 LinesofcodeLinesofcode 5,92314 gold badges71 silver badges131 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 variabletagify
. – Linesofcode Commented Oct 7, 2020 at 15:10
3 Answers
Reset to default 8It 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
版权声明:本文标题:javascript - How to delete tags in Tagify plugin? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742212595a2433988.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论