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> 

Answer 1

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> 

Answer 2

按照您的操作创建数组，然后使用myArray.splice(myArray.indexOf('colorForDeletion'), 1);

Answer 3

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>