jQuery Array is not being removed on second click

Question

Hi,

on click of images I'am passing the Image Name (attribute) to an Array, which is working fine, but whenever user click again to UnSelect, I'am trying to REMOVE Current Name($(this)), which is not happening, Instead Its being Removed Completely (Empty Array). and also every time comma is appending for 1st element :-(

JS : 
 questionCount = 0;
        $('.q2 .product-multiple').on('click',function(e){
            if($(this).hasClass('selectTag')){
                questionCount--;
                $(this).removeClass('selectTag');

                removeItem = "Removing Clicked element Name -  " + $(this).find('img').attr('name')
                alert(removeItem);
            console.log("Should be Removed here.. " +" "+ getTagsNameArray)


            } 
            else {
                questionCount++;
                $(this).addClass('selectTag');
                getTagsNameArray = new Array();
                getTagsName = getTagsName + "," + $(this).find('img').attr('name');
                getTagsNameArray.push(getTagsName)
        console.log("Passing Value in Array - " +" "+ getTagsNameArray)

            }
            });

        $('.q2-get-answer').on('click', function(){
            getTagsName = getTagsName +" / "+ $('.q2-answer').find('.product-multiple.selectTag img').attr('name');
            alert(getTagsName)
            console.log(getTagsName);
        })


html : 
<div class="q2">
            <label for="q2">What type of symptoms that your child has?</label>
            <div class="q2-answer" id="q2">
                <div class="product-multiple">
                    <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="gassy">
                    <div>Gassy</div>
                </div>
                <div class="product-multiple">
                    <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="fussy">
                    <div>Fussy</div>
                </div>
                <div class="product-multiple">
                    <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="diahrea">
                    <div>Diahrea</div>
                </div>
                <div class="product-multiple">
                    <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="spitup">
                    <div>Spit Up</div>
                </div>
                <div class="product-multiple">
                    <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="constipation">
                    <div>Constipation</div>
                </div>
            </div>
            <div class="q2-get-answer">
                Q3 click me
            </div>
        </div>

Thanks for Answer!!

can i create a common function for this, as there are many questions with same functionality ? Any Thoughts ?

Thanks Again

please check console.log() -> whenever the user select image "(name attribute) is being added in array" when user UNSelect Image (name attribute) has to remove from Array — React Developer, Mar 30 '16 at 06:44

score 2 · Accepted Answer · answered Mar 30 '16 at 06:45

Try this.

var getQ1Answer, getQ2Answer, getQ3Answer, getQ4Answer, getQ5Answer, getQ6Answer, sliderValue, selectMonth, q1answer, getTags;
var getTagsName = "";
var getTagsNameArray = new Array();
questionCount = 0;
$('.q2 .product-multiple').on('click', function(e) {
  if ($(this).hasClass('selectTag')) {
    questionCount--;
    $(this).removeClass('selectTag');
    var index = getTagsNameArray.indexOf($(this).find('img').attr('name')); 
    if (index !== -1) {
      getTagsNameArray.splice(index, 1);
    }
  } else {
    questionCount++;
    $(this).addClass('selectTag');
    getTagsNameArray.push($(this).find('img').attr('name'));
  }
});

score 2 · Answer 2 · answered Mar 30 '16 at 06:45

You need to declare array outside the function. You pushed items in array with , which is not needed. Your JS code will look like:

var getQ1Answer, getQ2Answer, getQ3Answer, getQ4Answer, getQ5Answer, getQ6Answer, sliderValue, selectMonth, q1answer, getTags;
var getTagsName = "";
var getTagsNameArray = new Array();     // here you should create an array
questionCount = 0;
$('.q2 .product-multiple').on('click',function(e){
    if($(this).hasClass('selectTag')){
        questionCount--;
        $(this).removeClass('selectTag');
        removeItem = "Removing Clicked element Name -  " + $(this).find('img').attr('name')
        alert(removeItem);
        var doubleSelect = $(this).find('img').attr('name');
        var index = getTagsNameArray.indexOf(doubleSelect);
        console.log(index)
        if (index > -1) {
            getTagsNameArray.splice(index, 1);
        }
        console.log("Should be Removed here.. " +" "+ getTagsNameArray)
    } 
    else {
        questionCount++;
        $(this).addClass('selectTag');
        getTagsNameArray.push($(this).find('img').attr('name'));            //change is here
        console.log("Passing Value in Array - " +" "+ getTagsNameArray)
    }
});

$('.q2-get-answer').on('click', function(){
    getTagsName = getTagsName +" / "+ $('.q2-answer').find('.product-multiple.selectTag img').attr('name');
    alert(getTagsName)
    console.log(getTagsName);
})

Fiddle

score 1 · Answer 3 · answered Mar 30 '16 at 06:44

You are appending a string to an array, which transforms the array into a string: getTagsName + "," Instead of appending a string to the array, you need to add a new element to the Array by using getTagName.push($(this).find('img').attr('name')). You can remove items by using indexOf() and splice(). If you want to print the array, simply use getTagsName.join(). This will turn your array in a comma-seperated string.

Rayon · Answer 4 · 2016-03-30T07:32:59.107

First of all, you should not have so many variables. Just a variable to push/splice item from/to array.

Array.prototype.splice() => The splice() method changes the content of an array by removing existing elements and/or adding new elements.

Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var getTagsNameArray = [];
$('.q2 .product-multiple').on('click', function(e) {
  var item = $(this).find('img').attr('name');
  if ($(this).hasClass('selectTag')) {
    $(this).removeClass('selectTag');
    getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
  } else {
    $(this).addClass('selectTag');
    getTagsNameArray.push(item);
  }
  console.log(getTagsNameArray.join(', '));
});

$('.q2-get-answer').on('click', function() {
  console.log(getTagsNameArray.join(', '));
})

.product-multiple {
  float: left;
  margin: 10px;
}
.product-multiple img {
  width: 200px;
  height: 150px;
}
.product-multiple img:hover {
  cursor: pointer;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  cursor: pointer;
}
.digestive-tool {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}
.digestive-tool .q1-answer li,
.digestive-tool .q2-answer li,
.digestive-tool .q3-answer li,
.digestive-tool .q4-answer li,
.digestive-tool .q5-answer li,
.digestive-tool .q6-answer li {
  list-style-type: none;
  display: inline-block;
}
.digestive-tool .q1-get-answer,
.digestive-tool .q2-get-answer,
.digestive-tool .q3-get-answer,
.digestive-tool .q4-get-answer,
.digestive-tool .q5-get-answer,
.digestive-tool .q6-get-answer {
  border: 1px solid #f00;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.digestive-tool .product,
.digestive-tool .product-multiple {
  display: inline-block;
}
.digestive-tool .product img,
.digestive-tool .product-multiple img {
  width: 150px;
  height: 180px;
  cursor: pointer;
}
.selectTag {
  border: 2px solid #00257a;
}
.q2-get-answer {
  margin-top: 20px;
  clear: left;
  border: 1px solid #900;
  background: #f00;
  cursor: pointer;
  width: 200px;
  padding: 20px;
  color: #fff;
}

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q2">
  <label for="q2">What type of symptoms that your child has?</label>
  <div class="q2-answer" id="q2">
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="gassy">
      <div>Gassy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="fussy">
      <div>Fussy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="diahrea">
      <div>Diahrea</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="spitup">
      <div>Spit Up</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="constipation">
      <div>Constipation</div>
    </div>
  </div>
  <div class="q2-get-answer">
    Q3 click me
  </div>
</div>

Fiddle here

(getTagsNameArray.indexOf(item), 1) use of "1" and also can we create a common function to be used for other questions ? please advice — React Developer, Mar 30 '16 at 07:07

Pimmol · Answer 5 · 2016-03-30T07:14:00.793

It's because you create a new getTagsNameArray array everytime you unselect a $('.q2 .product-multiple'). See the else statement in the click handler.

If I understand your question correctly, you want an array with the name attributes of the selected images? In that case:

declare and create the getTagsNameArray outside the click handler
on click of an image, add the name to the array
on click again (so unselecting), find the name in the array and remove it.

https://jsfiddle.net/gcke1msx/7/

var getTagsNameArray = [];

$('.q2 .product-multiple').on('click', function(e) {
  // get the name of the image
  var name = $(this).find('img').attr('name');

  if($(this).hasClass('selectTag')) {
    // it was selected, now unselected
    // so remove its name from the array
    // see: http://stackoverflow.com/questions/5767325/remove-a-particular-element-from-an-array-in-javascript
    $(this).removeClass('selectTag');
    var index = getTagsNameArray.indexOf(name);
    getTagsNameArray.splice(index, 1);
  } else {
    // selected it
    // and add name to array
    $(this).addClass('selectTag');
    getTagsNameArray.push(name);
  }
});

$('.q2-get-answer').on('click', function(){
  alert('selected: ' + getTagsNameArray.join(', '));      
})

score 0 · Answer 6 · answered Mar 30 '16 at 07:31

Here is a live demo https://jsfiddle.net/soonsuweb/4ea54xxu/3/

You can use array.push, splice, join.

var selected = [];

$('.q2 .product-multiple').on('click',function (e) {
    if($(this).hasClass('selectTag')){
        $(this).removeClass('selectTag');
        var name = $(this).find('img').attr('name');

        // remove the name from selected
        for (var i=0; i<selected.length; i++) {
            if (name === selected[i]) {
                selected.splice(i, 1);
            }
        }

        console.log("Should be Removed here.. ", name);
        console.log("Passing Value in Array - ", selected.join(', '))
    }
    else {
        $(this).addClass('selectTag');

        var name = $(this).find('img').attr('name');
        selected.push(name);
        console.log("Passing Value in Array - ", selected.join(', '))
    }
});

$('.q2-get-answer').on('click', function () {
    alert(selected.join(', '));
    console.log(selected.join(', '));
});

jQuery Array is not being removed on second click

6 Answers6