Почему при клике удаляются все элементы?

Question

[kikosko]

Почему когда срабатывает условие, удаляются все элементы массива, а не тот по которому совершился клик ?

// delete method
    removeEntry() {
        for (let i = this.items.length - 1; i > -1; i--) {
            this.items.splice(i, 1);
        }
         this.save();
         this.load();
    }
//load table
    load() {
        let tBody = document.querySelector('tbody');

        tBody.innerHTML = '';

        for (let i = 0; i < this.items.length; i++) {
            let tr = document.createElement('tr');
            tr.innerHTML = `<tr class="data">
                                <th scope="row" class="checkBox"><input type="checkbox" class="form-check-input" bid ="${i}"></th>
                                <td>${this.items[i].fname}</td>
                                <td>${this.items[i].phone}</td>
                                <td>${this.items[i].email}</td>
                                <td ><i class="delete far fa-trash-alt" id="rubbish" data-id="' + ${i} + '"></i></td>
                            </tr>`;
            tBody.append(tr);
        }

d.addEventListener('click', (e)=> {
           if(e.target.id === 'rubbish') {
               console.log('click');
               app.UserBook.removeEntry();
           }
},false);

Answer 1

[Stalker_RED]

Потому что в removeEntry у вас идет перебор всех элементов и удаление каждого.

Comments

[kikosko]

подскажите пожалуйста, что поправить в методе удаления

[Stalker_RED]

kikosko,

d.addEventListener('click', e => {
           if(e.target.id === 'rubbish') {
               let id = e.target.dataset.id // значение из data-id
               console.log('click', id, e.target);
               app.UserBook.removeEntry(id); // передаем в метод
           }
},false);

    removeEntry(id) {
        this.items.splice(id, 1) // удаляем
         this.save();
         this.load();
    }

И уберите повторяющиеся id из документа.

[kikosko]

Stalker_RED, Спасибо !