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

Question

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

在DOM中，标签是与“x”按钮一起生成的。“x”按钮会从DOM中删除元素，但删除数组时会出现问题。我能找到的最接近解决方案是这个问题，但是我无法让它完全工作。 这里是CodePen 以下是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
});

最终结果是splice操作删除了太多的数组项。

我也尝试过

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

请帮忙！提前感谢

将它与类似的结果进行比较。

- bjurtown

Answer 1

您应该使用类似 .indexOf() 的方法来获取元素的索引，然后对数组进行切片：

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

Working demo

- Y.Puzyrenko

Answer 2

splice 部分没问题。问题在于你对 .removetag 添加了过多的点击回调函数。

每当你添加一个新元素时，都会向已经存在于页面上的每个 .removetag 元素添加另一个 click 事件。

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

这样，无论你点击哪个元素，其他所有元素都会被指定为触发单击回调函数。

解决方案：

相反，在创建标记时，仅将单击事件设置为最后添加的.removetag元素。

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

更新的CODEPEN

- LcSalazar

---

谢谢，虽然这解决了我不知道的问题，但它并没有完全按照预期工作。例如，如果我添加三个标签'a'、'b'和'c'，然后删除'b'，那么数组将会切掉标签'a'。你有什么想法吗？ - bjurtown

这是因为 splice 函数的第一个参数应该是你想要移除的初始索引。你把 this 作为了索引，但是为了获取元素的实际索引位置，你可以使用 $(this).index()。所以应该改为：tag_array.splice($(this).index(), 1);。 - LcSalazar