Как удалить конкретный элемент массива? js

Question

Делаю сайт кинотеатра. Нужно, чтобы при клике на определённое место оно добалвлось в массив, а при повторном удалялось. Есть такой код, но не работает, что здесь не так?

let seats = document.querySelectorAll('.seats');
let arrSeats = [];
for(let i = 0; i < seats.length; i++) {
    seats[i].addEventListener('click', (event) => {
        let eventButton = event.currentTarget;
        let seatsAtr = eventButton.getAttribute('data-info');
        seatsAtr = JSON.parse(seatsAtr);
        selectSeats(seatsAtr);
        colorSeats(eventButton, seatsAtr);
    });
}

function selectSeats(seat) {
    if(arrSeats.indexOf(seat) == -1) {
        arrSeats.push(seat);
    } else {
        arrSeats.splice(seat, 1);
    }
...

Answer 1

Что здесь не так?

splice хочет arr.splice(начальный_индекс, сколько_элементов_удалить_считая_оттуда) а вы даете ему значение элемента, вместо его индекса. Вообще, функция должна выглядеть так:

function selectSeats(seat) {
  let index = arrSeats.indexOf(seat);

  if (index == -1) {
    arrSeats.push(seat);
  } else {
    arrSeats.splice(index, 1); // <--
  }
}

Но есть другая проблема: в параметр seat прилетает объект, созданный через JSON.parse. Даже если объекты созданы из одинаковых исходных строк, они всё еще будут уникальными объектами (не равными друг другу):

let arr = [
  {"a": 1, "b": 2}
];

let str = '{"a": 1, "b": 2}';
console.log( JSON.parse(str) === JSON.parse(str) ); // false

console.log( {"a": 1, "b": 2} === {"a": 1, "b": 2} ); // false

console.log( arr.indexOf( {"a": 1, "b": 2} ) ); // -1

Вообще, странно хранить текстовый объект в атрибуте HTML-элемента и при каждом клике заново его парсить. Нужно или менять струтуру данных полностью (что предпочтительнее) или хранить и искать индекс прямо текстового значения thisButton.getAttribute('data-info') без JSON.parse. Не зная задачу целиком, невозможно сказать точнее.

БЛОГ НА HUSL

Как удалить конкретный элемент массива? js

Ответы (1 шт):