Javascriptで配列から文字列を取り除く

Question

私はクラス ".newColor"で一連のdivを持っています。これらのdivの1つがクリックされると、その内容は文字列に変換され、配列にまだリストされていない場合にのみpushメソッドを使用してmyArrayという配列に追加されます。次に、myArrayはクラス ".removeItem"を持つ一連のdivに変換され、水平線の上に表示されます。

これらの「.removeItem」divをクリックして、divコンテンツ（その文字列）を追加方法と同様の方法で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

あなたはすでにあなたの.removeItem要素を使用すると、clickイベントリスナーを追加する時には存在しないので、あなたが使用することmyArray.splice(myArray.indexOf('colorForDeletion'), 1);

Answer 3

を使用し、次にやっているように、アレイを作成します。 イベントの委任親のように：

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

その後、あなたはDOM要素を削除するには、アレイ、およびjQueryのremove機能から要素を削除するArray.prototype.slice()を使用することができます。

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>