javascript - 单击按钮即可删除

Question

我有一个部分，用户可以通过输入文本并单击添加按钮来添加标签。添加标签后，它会显示一个删除按钮，以便用户可以添加或删除标签。我创建了 JavaScript 代码以允许用户添加在下面运行的标签。但是，我不知道如何允许用户在单击删除按钮时删除标签。任何帮助将不胜感激。

if($("#addTag").length>0){

    $("#addTag").click(function(){

        var tag = $("#tag").val()
        var campaign_tags =  JSON.parse($("#campaign_tags").val())

        if(tag==''){
            alert('no text added')
        }
        else{
            //add check to see if the tag is already added
            if(jQuery.inArray(tag, campaign_tags)==-1)
            {

              var tag_html = "<div class='campaign_tags'><small>"+tag+"</small><div class='campaign_btn remove_tag'>x</div></div>"

              $("#tag_container").append(tag_html)

              //now add the tag to the array
              campaign_tags.push(tag)
              $("#campaign_tags").val(JSON.stringify(campaign_tags))

              //re-initialize the delete function
              init_remove_tag()

            }


        }   
    })  
}   

Answer 1

点击删除按钮后将调用下面的代码。它将找到 campaign_tags div 并将其删除。

$(document).on("click", ".remove_tag", function(){
    $(this).parents(".campaign_tags").remove();
});

编辑

正如 @Blazemonger 所建议的，.closest() 是一个更好的选择

$(document).on("click", ".remove_tag",function(){
    $(this).closest(".campaign_tags").remove();
});