无插件实现带删除按钮的标签：新增标签删除失效，请求帮助

问题原因 #

你当前的删除按钮点击事件是直接绑定在.btn-close-tags元素上的，但这种方式只能作用于页面加载完成时就已经存在的DOM元素。通过输入框新增的标签是动态生成的，这些元素在页面初始化阶段并不存在，所以点击事件无法绑定到它们身上，自然触发不了删除逻辑。

解决方案：使用事件委托 #

利用jQuery的事件委托机制，把点击事件绑定到一个页面初始化时就存在的父容器上（比如.wrapper-tags），然后通过选择器过滤出真正需要触发事件的子元素（.btn-close-tags）。这样不管是初始的标签还是后续动态添加的标签，删除按钮的点击事件都能正常触发。

另外可以优化一点：fadeOut只是隐藏元素，建议隐藏完成后把元素从DOM中移除，避免冗余元素占用资源。

修改后的完整代码 #

HTML（无需改动）

<div class="row p-5">
    <h4>
        <i class="fa-solid fa-tags"></i>
        Tags Input
    </h4>
    <div class="wrapper-tags">
        <div class="item-tag">
            <span class="tag">HTML
                <button type="reset" class="btn-close-tags">
                    <i class="fa-solid fa-xmark"></i>
                </button> 
            </span>
        </div>
        <input type="text" name="tags" class="form-control" id="tags-input" data-role="tagsinput" placeholder="Add Tags ...">
    </div>
</div>

修改后的JS

$(document).ready(function(){

    /* ========================= Input Tags ========================= */
    $("#tags-input").keypress(function(event){
        var key = event.which;
        
        if( key == 13 || key == 44){
            event.preventDefault();
            var tag = $(this).val();
            if(tag.length > 0){
                $("<span class='tag'>"+ tag +"<button type='reset' class='btn-close-tags'><i class='fa-solid fa-xmark'></i></button></span>").insertBefore(this).fadeIn(100);
                $(this).val("");
            }
        }
    })

    /* ========================= Button Close Tags（修改为事件委托） ========================= */
    $(".wrapper-tags").on("click", ".btn-close-tags", function(){
        // 先隐藏，隐藏完成后移除元素
        $(this).parents("span").fadeOut(100, function(){
            $(this).remove();
        });
    })
 });

关键改动说明 #

1. 把原来的$(".btn-close-tags").click(...)改成$(".wrapper-tags").on("click", ".btn-close-tags", ...)
   • .wrapper-tags是页面加载时就存在的父容器
   • on方法的第二个参数是目标元素的选择器，用来过滤触发事件的子元素
2. 新增了fadeOut的回调函数，在动画完成后调用remove()把元素从DOM中彻底移除，避免残留无用元素

内容的提问来源于stack exchange，提问作者Guar Dian