Question

我有一个页面，用户可以在其中创建标签（就像在stackoverflow中一样），然后将其发送（POST）到后端以存储在数据库中。用户可以制作标签，但也可以在最终点击提交之前将其删除。

在DOM中，标签与＆＃39; x＆＃39;一起生成。按钮。＆＃39; x＆＃39;按钮从DOM中删除元素，但从数组中删除时会出现问题。我能找到最接近解决方案的是this question，但是我无法让它为我工作。

这里是javascript（我使用JQuery）

window.tag_array = [];

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

var tag = $("#input-tag").val();

//if tag is empty
if(!$('#input-tag').val()) {

    alert("can't be empty");

    } else {
        //put tag.val into an array         
        tag_array.push(tag);

        //add to DOM
        $( "#tagsbox" )
        .append( "<div class='displaytag'><i>"+tag+"</i><input type='hidden' class='tag' value="+tag+"><button onClick='return false;' class='removetag'>x</button></div>" );

        //reset value in text area to null
        $("#input-tag").val("");

        //remove tag onclick
        $('.removetag').click(function() {
            $(this).parent().remove(); //remove tag from DOM

            //splice from array
            tag_array.splice( this, 1 ); //<--HERE IS PROBLEM (i think)

        });


    } //end else

    alert(tag_array); //check array
});

最终结果是拼接取出了太多的数组项。

我也试过

tag_array.splice(tag_array.indexOf(tag),1);

得到类似的结果。

请帮忙！提前致谢

Answer 1

您应该使用.indexOf()之类的东西来获取元素的索引然后拼接数组：

tag_array.splice(tag_array.indexOf(elm),1);

Working demo

Answer 2

splice部分没问题。问题是您向.removetag添加了一次点击回调太多次了。

每次添加新元素时，都会向页面上已有的click项添加另一个.removetag事件。

$('.removetag').click(function()

这样，每当你点击一个元素时，所有其他元素都被指定为触发点击回调。

<强>解决方案

相反，在创建代码时，只将click事件设置为最后添加的.removetag元素：

$('.removetag').last().click(function()

Updated CODEPEN

Javascript - 从动态创建的数组中删除特定元素

2 个答案: