Javascript - 从动态创建的数组中删除特定元素 [英] Javascript - remove specific element from dynamically created array

问题描述

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

在DOM中，标签与x按钮一起生成。 x按钮从DOM中删除元素，但是从数组中删除时会出现问题。最接近我的解决方案是这个问题，但是我无法得到这对我来说相当有用。

这是codepen

这是javascript（我正在使用JQuery）

  window.tag_array = []; 
 
 $（#addtag）.click（function（）{
 
 var tag = $（＃input-tag）。val（）; 
 
 //如果标记为空
 if（！$（'＃input-tag'）。val（））{
 
 alert（不能为空 ）; 
 
} else {
 //将tag.val放入数组
 tag_array.push（标签）; 
 
 //添加到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>）; 
 
 //将文本区域中的值复位为null 
 $（＃input-tag）。val（）; 
 
 //删除标签onclick 
 $（' .removetag'）点击（function（）{
 $（this）.parent（）。remove（）; //从DOM中删除标签
 
 // splice from array 
 tag_array.splice（this，1）; // < -  HERE IS PROBLEM（我想）
 
 }）; 
 
 
} // end else 
 
 alert（tag_array）; // check array 
}）; 
  

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

我也尝试过

  tag_array.splice（tag_array.indexOf（tag），1）; 
  

类似的结果。

请帮帮我！感谢提前

解决方案

你可能应该使用像 .indexOf（）指定elem的索引然后拼接数组

  tag_array.splice（tag_array.indexOf（elm），1 ）; 
  

工作演示

I have a page where users can create tags (much like here in stackoverflow), which are then sent(POST) to the back end to be stored in a database. The user can make tags but also remove them before finally hitting Submit.

In the DOM the tags are generated along with an 'x' button. The 'x' button removes the element from the DOM, but the trouble comes when removing from the array. The closest I could get to a solution was this question, however I couldn't get it to quite work for me.

Here's the codepen

Here's the javascript (i'm using 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
});

The end result is the splice takes out too many array items.

I have also tried

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

to a similar result.

Please help! Thanks in advance

解决方案

You've probably should use smth like .indexOf() to gey an index of elem and then splice an array

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

Working demo

这篇关于Javascript - 从动态创建的数组中删除特定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！