如何在單擊時從陣列中刪除 object？ Javascript

Question

我正在添加顯示在列表中的小時和日期，然后將值推送到數組中。 每個列表項旁邊都會創建一個按鈕，我希望能夠在單擊時刪除特定的列表項。 我已經嘗試過拼接、切片和移除，但我無法讓它按我的意願工作。

let vacationList = [];
  $('#add').click(function(e){
    e.preventDefault();
  
    let vacationHours = $('#vacationHours').val();
    let vacationDates = document.querySelector("#vacationDates").value;
    const li = document.createElement("li");
    li.innerText = vacationHours + "h - " + vacationDates;
    const button = document.createElement("button");
    button.className = "fa fa-minus-circle";
    const ul = document.querySelector(".list");
    ul.appendChild(li); 
    li.appendChild(button);

  button.addEventListener('click', (e) => {
    e.preventDefault() 

    ??

  });

vacationList.push({vacationHours: Number(vacationHours), vacationDates: vacationDates});

Answer 1

Element.remove()應該適用於 dom 元素。 如果您還想從數組中刪除，請提供添加到數組的代碼。

$('#add').click(function(e) {
  e.preventDefault();

  let vacationHours = $('#vacationHours').val();
  let vacationDates = document.querySelector("#vacationDates").value;
  const li = document.createElement("li");
  li.innerText = vacationHours + "h - " + vacationDates;
  const button = document.createElement("button");
  button.className = "fa fa-minus-circle";
  const ul = document.querySelector(".list");
  ul.appendChild(li);
  li.appendChild(button);

  button.addEventListener('click', (e) => {
    e.preventDefault()

    this.closest("li").remove();
  });

});