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

// 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);