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

我有一个页面，用户可以在其中创建标签（就像在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( "
"+tag+"x
" ); //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); 

工作演示

Answer 2

splice部分没问题。 问题是你要多次向.removetag添加点击回调。

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

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

这样，每当您单击一个元素时，所有其他元素都被分配以触发单击回调。

解

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

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

更新了CODEPEN