在Javascript中从数组中删除字符串

Question

我有一系列“.newColor”类的 div。单击其中一个 div 时，其内容将转换为字符串，并使用 push 方法将其添加到名为 myArray 的数组中，前提是它尚未列在数组中。然后，myArray 被转换回一系列具有“.removeItem”类的 div 并显示在水平线上方。

如何单击这些“.removeItem” div，并以与添加方式类似的方式从 myArray 中删除 div 内容（其字符串）？因为它查看 div 内容，将其转换为字符串，如果存在，则从数组中删除该字符串。

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

无需在每次数组更改时渲染所有项目。最好只追加新项目并根据需要删除旧项目。

您还需要在创建新元素后添加事件处理程序。它们以前不存在。

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

由于在您添加点击事件侦听器时您的 .removeItem 元素不存在，您可以像这样在父级上使用 事件委托：

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

然后，你可以使用Array.prototype.slice()从数组中移除元素，并使用jQuery的remove函数移除DOM元素：

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>