Удаление строки из массива в Javascript

Question

У меня есть серия 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>

javascript jquery

0

Taylor 27 Авг 2017 в 15:02

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>

1

lumio 27 Авг 2017 в 12:19

Answer 2

Создайте массив, как вы уже делаете, и затем используйте myArray.splice(myArray.indexOf('colorForDeletion'), 1);

0

itsundefined 27 Авг 2017 в 12:05

Answer 3

Поскольку ваши элементы .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>

0

blex 27 Авг 2017 в 12:17

Удаление строки из массива в Javascript

3 ответа

Похожие вопросы

Новые вопросы

javascript