Removing string from array in Javascript

Question

I have a series of divs with class ".newColor". When one of these divs is clicked its contents is converted into a string and added to an array called myArray using the push method only if it is not already listed in the array. Then, myArray is converted back into a series of divs with class ".removeItem" and displayed above a horizontal line.

How can I click on these ".removeItem" divs, and have the divs content (its string) removed from myArray in a similar fashion to how it was added? As in it looks at the divs content, converts it into a string and removes that string from the array if it exists.

var myArray = [];
var myArrayLength;
var newItem = "";
    
$( ".newColor" ).click(function() {
    newItem = $(this).text();
    $( '#displayArray' ).html('');
    
    if(myArray.indexOf(newItem) == -1) {
    	myArray.push(newItem); 
        myArrayLength = myArray.length;
    }
       
    for (var i = 0; i < myArrayLength; i++) {
        $( '#displayArray' ).append( '<div class="removeItem">' + myArray[i] + '</div>');
    }
});

.newColor, .removeItem {
    border: 1px solid black; 
    cursor: pointer; 
    margin: 2px; 
    padding: 2px; 
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Current array:
<span id="displayArray"></span>

<hr>
Add to array:
<div class="newColor">blue</div>
<div class="newColor">red</div>
<div class="newColor">green</div>
<div class="newColor">orange</div>
<div class="newColor">purple</div>
<div class="newColor">yellow</div>
<div class="newColor">brown</div>
<div class="newColor">pink</div>

lumio · Accepted Answer · 2017-08-27 12:19:28Z

There is no need to render all items each time the array changes. It's better to only append new items and remove old ones as needed.

You also need to add the event handler after you created the new elements. They are nonexistent before.

var myArray = [];
var newItem = "";
// Query only once - performs better
var $displayArray = $('#displayArray');

$(".newColor").click(function() {
  newItem = $(this).text();

  // Only add new entries to DOM.
  // Skip if item is in array
  if (myArray.indexOf(newItem) !== -1) {
    return;
  }

  myArray.push(newItem);
  // Generate new item and add click handler
  $newItem = $('<div class="removeItem">' + newItem + '</div>');
  $newItem.on('click', function(e) {
    // Remove item from array and also from DOM
    var $item = $(this);
    var item = $item.text();
    myArray.splice(myArray.indexOf(item), 1);
    $item.remove();
  });
  $displayArray.append($newItem);
});

.newColor,
.removeItem {
  border: 1px solid black;
  cursor: pointer;
  margin: 2px;
  padding: 2px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Current array:
<span id="displayArray"></span>

<hr> Add to array:
<div class="newColor">blue</div>
<div class="newColor">red</div>
<div class="newColor">green</div>
<div class="newColor">orange</div>
<div class="newColor">purple</div>
<div class="newColor">yellow</div>
<div class="newColor">brown</div>
<div class="newColor">pink</div>

itsundefined · Accepted Answer · 2017-08-27 12:05:11Z

0

Create the array as you already are doing and then use myArray.splice(myArray.indexOf('colorForDeletion'), 1);

answered Aug 27, 2017 at 12:05

itsundefined

1,4462 gold badges13 silver badges33 bronze badges

Comments

blex · Accepted Answer · 2017-08-27 12:17:38Z

Since your .removeItem elements don't exist at the time you add the click event listener, you may use event delegation on the parent like so:

$('#displayArray').on('click', '.removeItem', function(){/* ... */});

Then, you can use Array.prototype.slice() to remove the element from the array, and jQuery's remove function to remove the DOM element:

var myArray = [],
    text = "",
    index;

$(".newColor").click(function() {
  text = $(this).text();

  if (myArray.indexOf(text) == -1) {
    myArray.push(text);
    $('#displayArray').append('<div class="removeItem">' + text + '</div>');
  }
});

// if we click on #displayArray and the target has the .removeItem class
$('#displayArray').on('click', '.removeItem', function() {
  text = $(this).text();
  index = myArray.indexOf(text);
  $(this).remove();

  if (index > -1) {
    myArray.slice(index, 1); // remove 1 element at index `index`
  }
});

.newColor,
.removeItem {
  border: 1px solid black;
  cursor: pointer;
  margin: 2px;
  padding: 2px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Current array:
<span id="displayArray"></span>

<hr> Add to array:
<div class="newColor">blue</div>
<div class="newColor">red</div>
<div class="newColor">green</div>
<div class="newColor">orange</div>
<div class="newColor">purple</div>
<div class="newColor">yellow</div>
<div class="newColor">brown</div>
<div class="newColor">pink</div>

Collectives™ on Stack Overflow

Removing string from array in Javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related