how to remove a specific item from an array based on what item you click using javascript

Question

I want to be able to click on a list item(which is made from the items of the array) and remove it permanently from the array. I am able to remove it when clicked using remove(), but when I add another item to the array the item shows back, plus the new item i just added.

JSFIDDLE account: http://jsfiddle.net/trav5567/3s64o1ta/1/

Javascript

      function testArray(){
       var Fruit = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];
       function initArray(){
        loopArray();
       }initArray();
       function myFruit(){
         $('#addFruit').on('click', function(e) {
          e.preventDefault();
          var flag = true;
          var val = $('#fruitAdd').val();
          for(var i = 0 ; i < Fruit.length ; i ++){
            if(Fruit[i] == val){
              flag = false;
              console.log('already entered this item');
             }        
           }
           if(flag){
            Fruit.push(val);
            loopArray();
           }
         });
         }myFruit();
         function loopArray(){
           var fruitList = $('ul.fruit');
           var arrayContainer = $('.arrayContainer');
           fruitList.empty();
           for(var i = 0; i< Fruit.length; i++){
             fruitList.append('<li>'+Fruit[i]+'</li>');
           }
          }
         function removeItem(){
            var itemClicked = $('ul.fruit li');
            itemClicked.on('click', function(){
               $(this).remove();
            });
         }removeItem();
       }testArray();

when you are using jquery add jquery tag to them

Mritunjay
– Mritunjay

2014-08-07 05:27:58 +00:00
Commented Aug 7, 2014 at 5:27 — Mritunjay
– Mritunjay, Commented Aug 7, 2014 at 5:27

Chakravarthy S M · Accepted Answer · 2014-08-07 04:38:22Z

1

You are not removing item from array when clicked, you are just removing the li tag which contains element when clicked, for to remove element from array also when clicked on item's li, you have to use splice method to remove element from array as

    var itemClicked = $('ul.fruit li');
       itemClicked.on('click', function () {
       $(this).remove();
       var item = $(this).text();
       var index = Fruit.indexOf(item);
      Fruit.splice(index,1);
   });

Check the Working Fiddle Here

answered Aug 7, 2014 at 4:38

Chakravarthy S M

6186 silver badges15 bronze badges

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

5 Comments

Travis Michael Heller Over a year ago

what does the 1 stand for next to index? (index,1)? I realized i can put any number in their and it still works...

Chakravarthy S M Over a year ago

1 stands for number of items to be removed from array from index(which is passed as first argument) position

Travis Michael Heller Over a year ago

i noticed that after i remove an item and then add another item i am unable to remove any more items??

Travis Michael Heller Over a year ago

Is their a way to fix this so that after i remove an item and then add an item back to the array that i can then delete an item again?

Chakravarthy S M Over a year ago

I have fixed it, you can check the fiddle jsfiddle.net/chakravarthysm/yvru3a2e/1, you have to just bind ul for click event passing li and repeat the same in callback as in itemclicked event callback

Collectives™ on Stack Overflow

how to remove a specific item from an array based on what item you click using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related