How to remove an item in array using javascript?

Question

This is the html:

<button id="btn1">CLICK 1</button>
<button id="btn2">CLICK 2</button>
<div id="show"></div>

This is the javascript:

product_id = new Array();
$("#btn").on('click', function () {
    $("#show").append("<div><button type='button' id='btn1x' class='close pull-right' aria-hidden='true'>&times;</button>" + "<pre>button 1</pre></div>");

    product_id.push("btn1");
    alert(product_id);
});

$(document).on('click', 'button#btn1x', function () {
    $(this).parent().remove();
    alert(product_id);
    //when I click this button, i want to remove the "btn1" that I pushed a while ago from my array 
});


$("#btn2").on('click', function () {
    $("#show").append("<div><button type='button' id='btn2x' class='close pull-right' aria-hidden='true'>&times;</button>" + "<pre>button 2</pre></div>");

    product_id.push("btn2");

});

$(document).on('click', 'button#btn2x', function () {
    $(this).parent().remove();
    //when I click this button, i want to remove the "btn2" that I pushed a while ago from my array 
});

I want to click the button and eventually a certain value will be inserted in the array that I made. But, I also created a close button and when I click it I want to remove the inserted value from the array.

Array.splice() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice — xmashallax, Oct 15 '13 at 22:17
You should not have multiple elements with the same id. Use a class instead. — Bergi, Oct 15 '13 at 22:17
its not the ids that i am pushing, its the values, just a simple string or text will do.. but, i can't use array.pop(), because it will only remove the last inserted item in the array.. — Ritz de Guzman, Oct 15 '13 at 22:17
possible duplicate of [Remove item from array by value](http://stackoverflow.com/questions/3954438/remove-item-from-array-by-value) — Bergi, Oct 15 '13 at 22:18
im currently trying to use the array.splice(), but the thing is, if you click the button multiple times the problem now exist. I cant use the splice anymore because of that situation.. — Ritz de Guzman, Oct 15 '13 at 22:19
please provide more information about what do you want to do. do you allow duplicates in your array? what if we want to remove a value, that occurs more than once? — Michał Rybak, Oct 15 '13 at 22:45
right! that's my point. If you are going to click the button a multiple times, you can still append a text box with the close button on it. At the same time, I want to add the same text, lets call it as "firsttext", in an array. But when I click the close button that I have appended, I will delete the appended textbox and also delete from my array the text that I have added when i clicked at that instance.. — Ritz de Guzman, Oct 15 '13 at 23:01
there will be a lot of duplicates in the array but every array should corresponds to every appended textbox that i have provided. but when i will click the close button from the appended text, an array that corresponds to that will be the one to be deleted, not the entire array.. — Ritz de Guzman, Oct 15 '13 at 23:08

score 0 · Answer 1 · answered Oct 15 '13 at 22:43

Use .pop(), all the regular javascript functions are available in jQuery.
http://learn.jquery.com/javascript-101/arrays/

Given an array:

var array = [1,2,3,5];
array.push(9); // [1,2,3,5,9]
array.pop(); // [1,2,3,5]

Now if you wanted to remove 2...that'd be different.

score 0 · Answer 2 · answered Oct 15 '13 at 22:55

0

I guess you're looking for a function like this:

removeProduct = function(item) {
    var n = product_id.indexOf(item);
    if(n >= 0)
        product_id.splice(n, 1);
}

http://jsfiddle.net/PC2JS/

answered Oct 15 '13 at 22:55

georg

195,833
46
263
351

score 0 · Answer 3 · answered Oct 15 '13 at 22:57

I had a similar problem like this when i wanted to keep track of async uploads and which progress bar to remove when an element finished uploading. This may not be what you are looking for but it may send you in the right direction. You could try a sort of dictionary method like the following:

var arr = []

Adding to array would look like

arr[uid] = value;
console.log(arr);

Then if you want to remove from the array

delete arr[uid];

If you want to iterate through you can do this:

for (var key in arr) { 
    value = arr[key];
    console.log(value); 
}

score 0 · Answer 4 · answered Oct 15 '13 at 23:08

html:

<button id="btn1" class="adder">CLICK 1</button>
<button id="btn2" class="adder">CLICK 2</button>
<div id="show"></div>

javascript:

$('button.adder').on('click',

function () {
    var aid = $(this).attr('id');

    $('#show').append('<div><button class="removable" style="height: 30px;">' + aid + '</button></div>');

});

$('div#show').on('click', 'div button.removable',

function () {
    //console.log(this);
    $(this).remove();

    console.log($('div#show').children());
});

If you want that behavior, you could do something like this. If you needed the information elsewhere (and were not concerned about performance) you could use $('div#show').children() to get the current list.

Tested on http://jsfiddle.net/eWtNN/8/ and it works.

Alternatively, if you are concerned about array list behavior, you can use array.pop(n) to remove a particular index, for example array.pop(0) will remove the first item from the array. Or array.pop(2) to remove the third item. Again, this is not focused on performance.

How to remove an item in array using javascript?

4 Answers4