Как упростить код(обращение к элементу)?

Question

Как упростить код(обращение к элементу)?

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2023

Как упростить данную строку в коде ?

const userID = Number(event.target.closest('td').previousSibling.previousSibling.previousSibling.previousSibling.textContent);

document.addEventListener('click', (event) => {
            if (event.target.classList.contains('js--btn-delete')) {
                const userID = Number(event.target.closest('td').previousSibling.previousSibling.previousSibling.previousSibling.textContent);
                console.log(userID)
                const userData = JSON.parse(localStorage.getItem('users'));
                userData.filter(item => {
                    if (userID === item.id) {
                        event.target.closest("tr").remove();
                        localStorage.removeItem(item);
                    }
                });
            }
        })

            <tr>
                 <td class="userId"></td>
                <td>${user.name}</td>
                <td>${user.phone}</td>
                <td>${user.age}</td>
                <td>
                    <button class="btn">View</button>
                    <button class="btn">Edit</button>
                    <button class="btn js--btn-delete">Delete</button>
                </td>
            </tr>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Я бы для простоты работы добавил data атрибут именно на TR чтобы не прописывать на каждой из кнопок. строки с localStorage заккоментил так как они в снипете работать не будут вместо этого добавил массив, который меняю через splice в конечном счете массив лучше иметь в таком виде так как localStorage можно повредить (если пользователь может что-то поломать, он рано или поздно поломает) и его лучше ипользовать на событии перезагрузки страницы onbeforeunload сохранять, ну а потом вытягивать при загрузке.

const userData = [
  {id:"1"},
  {id:"2"}
]
document.addEventListener('click', (event) => {
  if ( event.target.classList.contains('js--btn-delete')) {  
    const userID = event.target.closest('TR').dataset.id
    //const userData = JSON.parse(localStorage.getItem('users'));
    userData.splice(0, userData.length,
      ...userData.filter(item => userID !== item.id)
    )
    event.target.parentNode.parentNode.remove();
    console.log(JSON.stringify(userData))   
    //localStorage.setItem('users',JSON.stringify(userData));     
  }  
})

<table>
  <tr data-id="1" >
    <td class="userId"></td>
    <td>Иван</td>
    <td>Иванов</td>
    <td>21</td>
    <td>
        <button class="btn">View</button>
        <button class="btn">Edit</button>
        <button class="btn js--btn-delete">Delete</button>
    </td>
  </tr>
  <tr data-id="2">
    <td class="userId"></td>
    <td>Петр</td>
    <td>Петров</td>
    <td>22</td>
    <td>
        <button class="btn">View</button>
        <button class="btn">Edit</button>
        <button class="btn js--btn-delete">Delete</button>
    </td>
  </tr>
</table>

Как упростить код(обращение к элементу)?

Ответы