Javascript - удалить определенный элемент из динамически созданного массива

Question

У меня есть страница, на которой пользователи могут создавать теги (например, здесь, в stackoverflow), которые затем отправляются (POST) на задний конец для хранения в базе данных. Пользователь может создавать теги, а также удалять их, прежде чем, наконец, нажать Submit.

В DOM теги генерируются вместе с кнопкой «x». Кнопка «x» удаляет элемент из DOM, но проблема возникает при удалении из массива. Самое близкое, что я мог дойти до решения, было this question, однако я не мог заставить его работать для меня.

Here's the 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 
}); 

Конечный результат сращивания занимает слишком много элементов массива.

Я также попытался

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() 

Таким образом, всякий раз, когда вы нажимаете на один элемент, всем остальным назначалось также активировать обратный вызов.

Решение

Вместо этого, при создании тега, установите событие щелчка только к последней добавленной .removetag элемента:

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

Updated CODEPEN