removing a value from array

Question

I am working on a dropdown list which contains a checkbox and a value. When i select a checkbox, the id of that perticular item is appended to a input on right panel and the value of that item gets appended in the form of a tag on the right panel. When i click again on a checked checkbox, the appended value and the tag on the right have to be removed.

The problem i am facing is that the checkbox i am unchecking is not getting removed, instead some other alread appended value is getting removed.

Javascript:

var arr = [];
$(".taglistarea input[type='text']").click(function(){
    if(!$(this).parent("div").next(".taglist").is(":visible")) {
        $(this).parent("div").next(".taglist").slideDown();
    } else {
        $(this).parent("div").next(".taglist").slideUp();
    }
});

$(".taglist ul li a input[type='checkbox']").click(function(){
    var tagidall = $(".taglist ul li a").attr("id");

    var tagideach = $(this).parent("a").attr("id");
    var tagtexteach = $(this).text();

    arr.push(tagideach);

    if($(this).is(":checked")) {
        $(this).addClass("active");
        $(".ss").append('<a href="#" id="'+tagideach+'" class="tagss">International<span class="closetag"></span></a>');    
    } else {
        $(".ss a[id="+tagideach+"]").remove();
        //arr.splice(tagideach,1);
    }
    //alert(arr);
    $("#idvals").val(arr.toString());
});

i think that problem is here:

arr.splice(tagideach,1);

the complete fiddle is here: https://jsfiddle.net/kue83ud8/

Thanks.

pwolaq · Accepted Answer · 2016-11-17 07:34:20Z

3

as you said, the problem is with arr.splice(tagideach,1);

first argument of splice is the index to remove, not an object

you should replace that line with arr.splice(arr.indexOf(tagideach),1); (you should also check if indexOf returns value other than -1

another remarks

you should cache your selectors to improve performance:

if(!$(this).parent("div").next(".taglist").is(":visible")) {
    $(this).parent("div").next(".taglist").slideDown();
} else {
    $(this).parent("div").next(".taglist").slideUp();
}

should become:

var element = $(this).parent("div").next(".taglist");
if(!element.is(":visible")) {
    element.slideDown();
} else {
    element.slideUp();
}

instead of checking if element is visible you can use slideToggle()

also, you should read about event delegation in jQuery

answered Nov 17, 2016 at 7:34

pwolaq

6,41221 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3450590 Over a year ago

Thanks for your code, @pwolaq. Your change worked, and also i moved arr.push(tagideach); inside if($(this).is(":checked")){ to ensire that slicing happens only when checkbox is checked. But can you please explain the .splice function and how the 2 values separated by ',' are added inside splce? pls also explain why i should check if value retured is other than -1.

pwolaq Over a year ago

indexOf returns -1 if element is not found in array - if so, then you shouldn't use splice; first argument of splice is start index, second is the number of elements to remove - you should read that in docs

Azad · Accepted Answer · 2016-11-17 07:38:49Z

1

set element index to remove from array

arr.splice(arr.indexOf(tagideach),1);

answered Nov 17, 2016 at 7:38

Azad

5,2725 gold badges32 silver badges59 bronze badges

1 Comment

pwolaq Over a year ago

how does this differ from my answer?

Collectives™ on Stack Overflow

removing a value from array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related