Как удалить объект из массива по индексу?

Question

[Meetyourmaker]

есть таблица пользователей нужно по клику удалить нужного пользователя ,
кнопки remove генерируются динамически нужно узнать на какую кнопку кликнул пользователь и удалить этот oбъект (сам пользователь это объект в массиве а кнопка remove это ключ объекта)

const newPersonBtn = document.getElementById('new-person')
const modalWindow = document.getElementById('modal')
const closeModal = document.getElementById('close-modal')
const appendPerson = document.getElementById('append-person')
const overlay = document.getElementById('overlay')
const btnDeleteLastUser = document.getElementById('delete-last-user')
const btnDeleteUser = document.getElementById('delete-user')
const removeUser = document.getElementById('remove')
let userName = document.getElementById('name')
let userLastname = document.getElementById('last-name')
let userCountry = document.getElementById('country')
let userCity = document.getElementById('city')

// data
const userArr = []




// function open modal
const showModalWindow = () => {
   // userName.value = ''
   // userLastname.value = ''
   // userCountry.value = ''
   // userCity.value = ''

   modalWindow.classList.add('show')
   overlay.classList.add('overlay')
}
// function close modal
const closeModalWindow = () => {
   modalWindow.classList.remove('show')
   overlay.classList.remove('overlay')
}

// open modal
newPersonBtn.addEventListener('click', () => {
   showModalWindow()
})

// close modal
overlay.addEventListener('click', closeModalWindow)
closeModal.addEventListener('click', () => {
   closeModalWindow()
})
document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape' && modalWindow.classList.contains('show')) {
      closeModalWindow()
   }
})

// add user
appendPerson.addEventListener('click', () => {

   if (userName.value === '' || userLastname.value === '' || userCountry.value === '' || userCity.value === '') {
      alert('Заполните все поля')
   } else {
      newUser(userArr.length, userName.value, userLastname.value, userCountry.value, userCity.value)
      drawTable()
      closeModalWindow()
   }

})
// delete last user
btnDeleteLastUser.addEventListener('click', () => {
   userArr.pop()
   drawTable()
})


const newUser = (id, name, lastName, country, city, btn) => {
   let remove = `<button type="button" class="btn-close" onclick="remove(this)"></button>`
   btn = remove
   userArr.push({
      id: id,
      name: name,
      lastName: lastName,
      country: country,
      city: city,
      removeUser: btn,
   })
}



// draw table 
const drawTable = () => {
   let tableHtml = ''
   userArr.forEach(elem => {
      tableHtml += `
      <tr class="align-middle" id="row-users">
        <td class="table-warning">${elem.id}</td>
        <td class="table-warning">${elem.name}</td>
        <td class="table-warning">${elem.lastName}</td>
        <td class="table-warning">${elem.country}</td>
        <td class="table-warning">${elem.city}</td>
        <td class="table-warning">${elem.removeUser}.</td>
      </tr>`
   })
   document.getElementById('tbody').innerHTML = tableHtml
}

Answer 1

[Андрей Галкин]

Есть множество вариантов реализации, конкретно в твоем случае я бы пошел через делегирование, а именно: Код тут

В примере нет обновления таблицы, но есть вполне рабочий код обработки щелчка по кнопкам.
Осталось только привязать к функции отправку ajax запроса на сервер (если у тебя данные в бд хранятся) и обновление таблицы пользователей.

Answer 2

[Damir Aushenov]

btnDeleteLastUser.addEventListener('click', (e) => {
  const result = userArr.filter((user, i) => i !== e.target.id
})