How to remove an object from an array by index?

Question

JavaScript

there is a table of users, you need to delete the desired user on click, the remove
buttons are generated dynamically, you need to find out which button the user clicked on and delete this object (the user himself is an object in the array and the remove button is the key of the object)

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

There are many implementation options, specifically in your case, I would go through delegation, namely: Code here
In the example there is no table update, but there is quite a working code for processing button clicks.
It remains only to bind to the function sending an ajax request to the server (if you have data stored in the database) and updating the user table.

Answer 2

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