從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>