Как динамически удалять элементы массива? js

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

let ticketBlock = document.querySelector('.ticketBlock');
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) {
    arrSeats.push(seat);
    localStorage.setItem('seatArr', JSON.stringify(arrSeats));

    let arraySeats = JSON.parse(localStorage.getItem('seatArr'));
    console.log(arraySeats);

    if(arraySeats && ticketBlock) {
        ticketBlock.innerHTML = '';
        Object.values(arraySeats).map(item => {
            ticketBlock.innerHTML += `
                <div class=ticketInfo>
                    <p class="itemRow">Ряд: ${item.row}</p>
                    <p class="itemSeat">место: ${item.seat}</p>
                    <p class="itemPrice">${item.price}.00 грн</p>
                </div>
            `;
        });
    }
}

function colorSeats(seat, seatNumber) {
    let arraySeats = JSON.parse(localStorage.getItem('seatArr'));

    if(seat.classList.contains('selectedSeats')) {
        seat.classList.remove('selectedSeats');
        seat.innerHTML = '';
    } else {
        seat.classList.add('selectedSeats');
        seat.innerHTML += `
            <p>${seatNumber.seat}</p>
        `;
    }
}