Как решить проблему с удалением пользователя из телефонной книги?

Я создал телефонный справочник через JavaScript и там есть кнопка - при нажатии около пользователей появляется иконка - удалить пользователя.

Но когда я в этом режиме хочу удалить пользователя, то при создании другого пользователя - крестик создаётся и остаётся с пользователем.

Что делать?

Код:

'use strict'

const { removeStorage } = require('./modules/serviceStorage.js')

const {
    createElement,
    createContainer,
    createHeader,
    createFooter,
    createButtons,
    createTable,
    createForm,
} = require('./modules/createElements.js')

const createPhoneBook = () => {
    const app = document.querySelector('#app')
    const container = createContainer()
    const btnWrapper = createButtons()
    const table = createTable()
    container.append(btnWrapper, table)
    app.append(createHeader(), container, createFooter())
    return {
        container,
        table,
        btnWrapper,
    }
}

const init = () => {
    document.addEventListener('DOMContentLoaded', () => {
        const { container, table, btnWrapper } = createPhoneBook()

        let currentTheme = localStorage.getItem('theme') || 'light'
        document.documentElement.setAttribute('data-theme', currentTheme)

        const tableBody = table.querySelector('.table__body')

        const btnAdd = btnWrapper.querySelector('.btn-primary')
        const btnDel = btnWrapper.querySelector('.btn-danger')
        const bthDark = btnWrapper.querySelector('.btn-dark')

        tableBody.addEventListener('click', event => {
            if (event.target.classList.contains('del-icon')) {
                const row = event.target.closest('tr')
                if (row) {
                    const phone = row.cells[2].textContent
                    row.remove()
                    removeStorage(phone)
                }
            }
        })

        btnAdd.addEventListener('click', () => {
            container.append(createForm())
            document.querySelector('.form-overlay').classList.add('is-visible')
        })

        btnDel.addEventListener('click', () => {
            tableBody.querySelectorAll('.table__body tr').forEach(tr => {
                if (!tr.querySelector('.del-icon')) {
                    const tdDelIcon = createElement('td')
                    const delBtn = createElement('button', ['del-icon'])
                    tdDelIcon.append(delBtn)
                    tr.append(tdDelIcon)
                } else {
                    tr.querySelector('.del-icon').closest('td').remove()
                }
            })
        })

        bthDark.addEventListener('click', () => {
            currentTheme = currentTheme === 'light' ? 'dark' : 'light'
            document.documentElement.setAttribute('data-theme', currentTheme)
            localStorage.setItem('theme', currentTheme)
        })
    })
}

init()
'use strict'

const { getStorage, setStorage } = require('./serviceStorage.js')

const createElement = (tag, classNames = [], textContent = '') => {
    const element = document.createElement(tag)
    if (classNames.length) {
        element.classList.add(...classNames)
    }
    if (textContent) {
        element.textContent = textContent
    }
    return element
}

const createInput = (type, id, name, placeholder) => {
    const input = createElement('input', ['form-control'])
    input.type = type
    input.id = id
    input.name = name
    input.placeholder = placeholder

    if (type === 'number' && name === 'phone') {
        input.addEventListener('input', e => {
            let value = e.target.value
            if (value.startsWith('8')) {
                e.target.value = '+7' + value.substring(1)
            }
        })
    }

    return input
}

const createContainer = () => {
    return createElement('div', ['container'])
}

const createHeader = () => {
    const header = createElement('header', ['header'])
    const h1 = createElement(
        'h1',
        ['logo'],
        'телефонный справочник. Ник (я старался, извините)'
    )

    header.append(h1)
    return header
}

const createFooter = () => {
    return createElement(
        'footer',
        ['footer'],
        'Все права защищены @Ник (я старался, извините)'
    )
}

const createButtons = () => {
    const btnWrapper = createElement('div', ['btn-wrapper'])
    const buttonsData = [
        { classNames: ['btn', 'btn-primary'], text: 'Добавить' },
        { classNames: ['btn', 'btn-danger'], text: 'Удалить' },
        { classNames: ['btn', 'btn-dark'], text: 'Сменить тему' },
    ]

    buttonsData.forEach(({ classNames, text }) => {
        btnWrapper.append(createElement('button', classNames, text))
    })

    return btnWrapper
}

const createTable = () => {
    const table = createElement('table', ['table'])
    const thead = table.createTHead()
    const tbody = createElement('tbody', ['table__body'])
    const headerRow = thead.insertRow()

    ;['Имя', 'Фамилия', 'Телефон'].forEach(header => {
        headerRow.append(createElement('th', [], header))
    })

    const contacts = getStorage('contacts')

    contacts.forEach(item => {
        const row = tbody.insertRow()
        const cells = [item.name, item.surname, item.phone]
        cells.forEach(cell => {
            const td = row.insertCell()
            td.textContent = cell
        })
    })

    table.append(thead, tbody)
    return table
}

const createForm = () => {
    const formOverlay = createElement('div', ['form-overlay'])
    const form = createElement('form', ['form'])

    const formTitle = createElement('h2', ['form-title'], 'Добавить контакт')

    const formGroupName = createElement('div', ['form-group'])
    const formGroupSurname = createElement('div', ['form-group'])
    const formGroupPhone = createElement('div', ['form-group'])

    const labelName = createElement('label', ['form-label'], 'Имя:')
    const labelSurname = createElement('label', ['form-label'], 'Фамилия:')
    const labelPhone = createElement('label', ['form-label'], 'Телефон:')

    const nameInput = createInput('text', 'name', 'name', 'Имя')
    const surnameInput = createInput('text', 'surname', 'surname', 'Фамилия')
    const phoneInput = createInput('tel', 'phone', 'phone', 'Телефон')

    formGroupName.append(labelName, nameInput)
    formGroupSurname.append(labelSurname, surnameInput)
    formGroupPhone.append(labelPhone, phoneInput)

    const formSubmitBtn = createElement(
        'button',
        ['btn', 'btn-primary'],
        'Добавить'
    )
    formSubmitBtn.type = 'submit'
    const formCancelBtn = createElement('button', ['btn', 'btn-danger'], 'Отмена')
    formCancelBtn.type = 'reset'

    const closeBtn = createElement('button', ['close'])

    form.addEventListener('submit', e => {
        e.preventDefault()

        const formData = Object.fromEntries(new FormData(e.target))
        const contact = [formData.name, formData.surname, formData.phone]

        const contactData = {
            name: formData['name'],
            surname: formData['surname'],
            phone: formData['phone'],
        }

        const tableBody = document.querySelector('.table__body')
        const row = tableBody.insertRow()
        contact.forEach(input => {
            const td = row.insertCell()
            td.textContent = input
        })

        setStorage('contacts', contactData)

        formOverlay.remove()
        formOverlay.classList.remove('is-visible')
        form.reset()
    })

    form.addEventListener('reset', () => {
        form.reset()
    })

    formOverlay.addEventListener('click', e => {
        if (
            e.target.classList.contains('close') ||
            e.target.classList.contains('form-overlay')
        ) {
            formOverlay.remove()
            formOverlay.classList.remove('is-visible')
            form.reset()
        }
    })

    form.append(
        formTitle,
        formGroupName,
        formGroupSurname,
        formGroupPhone,
        formSubmitBtn,
        formCancelBtn,
        closeBtn
    )
    formOverlay.append(form)

    return formOverlay
}

module.exports = {
    createElement,
    createInput,
    createContainer,
    createHeader,
    createFooter,
    createButtons,
    createTable,
    createForm,
}
'use strict';

// Получение данных из localStorage по ключу
const getStorage = (key) => {
  const data = localStorage.getItem(key);
  return data ? JSON.parse(data) : [];
};

// Запись нового контакта в localStorage
const setStorage = (key, newContact) => {
  const currentData = getStorage(key);
  currentData.push(newContact);
  localStorage.setItem(key, JSON.stringify(currentData));
};

// Удаление контакта из localStorage по номеру телефона
const removeStorage = (phoneNumber) => {
  const currentData = getStorage('contacts');
  const updatedData = currentData.filter(contact => contact.phone !== phoneNumber); // предполагается, что телефон - это третий элемент в массиве
  localStorage.setItem('contacts', JSON.stringify(updatedData));
};

module.exports = {
  getStorage,
  setStorage,
  removeStorage,
};