Javascript - remove specific element from dynamically created array

Question

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

Answer 1

You should probably use something like .indexOf() to get an index of the element and then splice an array:

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

Working demo

Answer 2

The splice part is OK. The problem is that you're adding a click callback to .removetag too many times.

Everytime you append a new element, you are adding another click event to every .removetag item that is already on the page.

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

This way, whenever you click on one element, all the others were assign to fire the click callback too.

Solution

Instead, when creating the tag, set the click event only to the last added .removetag element:

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

Updated CODEPEN