У меня есть серия div с классом ".newColor". При щелчке по одному из этих элементов div его содержимое преобразуется в строку и добавляется в массив myArray с использованием метода push, только если он еще не указан в массиве. Затем myArray преобразуется обратно в серию div с классом ".removeItem" и отображается над горизонтальной линией.
Как я могу нажать на эти div ".removeItem" и удалить содержимое div (его строку) из myArray аналогично тому, как оно было добавлено? Так как он просматривает содержимое 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>
3 ответа
Нет необходимости отображать все элементы каждый раз, когда изменяется массив. Лучше только добавлять новые элементы и удалять старые по мере необходимости.
Вам также необходимо добавить обработчик событий после создания новых элементов. Они не существуют раньше.
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>
Создайте массив, как вы уже делаете, и затем используйте myArray.splice(myArray.indexOf('colorForDeletion'), 1);
Поскольку ваши элементы .removeItem
не существуют на момент добавления прослушивателя события click, вы можете использовать делегирование события для родителя следующим образом:
$('#displayArray').on('click', '.removeItem', function(){/* ... */});
Затем вы можете использовать Array.prototype.slice()
для удаления элемента из массива и функцию remove
в jQuery для удаления элемента 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>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.