从Javascript中删除字符串中的字符串

Question

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

如何单击这些“.removeItem”div，并将divs内容（其字符串）从myArray中以类似的方式从其中添加？就像在它看divs的内容一样，将它转换成一个字符串并从数组中移除该字符串（如果它存在的话）。

var myArray = []; 
 
var myArrayLength; 
 
var newItem = ""; 
 
    
 
$(".newColor").click(function() { 
 
    newItem = $(this).text(); 
 
    $('#displayArray').html(''); 
 
    
 
    if(myArray.indexOf(newItem) == -1) { 
 
    \t 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>