JavaScript DELETE button to item list

Consider:

function createDeleteButton(itemId) {
  const deleteButton = document.createElement("button");
  deleteButton.classList = "btn btn-danger";
  deleteButton.innerText = "Delete";
  deleteButton.addEventListener("click", ()=> handleDeleteButtonClick(itemId)); // Attach event listener to handle delete button click
  return deleteButton;
}



function handleDeleteButtonClick(itemId) {
  const row = event.target.closest("tr");
  row.remove();

  // Send delete request to the remote API
  fetch(`${baseUrl}/items/${itemId}`, {
    method: "DELETE",
  })
    .then((response) => {
      if (!response.ok) {
        throw Error("Error deleting item");
      }
      console.log("Item deleted successfully");
    })
    .catch((error) => {
      console.error(error);
    });
}

This code is so difficult. How can I shorten this?
Or how can I write the "closest" element function with other DOM code?

You need to pass event to the function.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function createDeleteButton(itemId) {
  const deleteButton = document.createElement("button");
  deleteButton.classList = "btn btn-danger";
  deleteButton.innerText = "Delete";
  deleteButton.addEventListener("click", (e) => handleDeleteButtonClick(e, itemId)); // Attach event listener to handle delete button click
  return deleteButton;
}

function handleDeleteButtonClick(event, itemId) {
  const row = event.target.closest("tr");
  row.remove();

  // Send delete request to the remote API
  fetch(`${baseUrl}/items/${itemId}`, {
      method: "DELETE",
    })
    .then((response) => {
      if (!response.ok) {
        throw Error("Error deleting item");
      }
      console.log("Item deleted successfully");
    })
    .catch((error) => {
      console.error(error);
    });
}

<!-- end snippet -->

You don't need add a click handler to each button. You can actually just delegate it to the body and check to see what was clicked on.

For my answer, I added the item it to the button via a data attribute, and then I gave the button an additional class of btn-delete.

Then I use a single event handler to check for the button clicked, get its ID, remove the tr and pass that ID to the fetch.

function createDeleteButton(itemId) {
  const deleteButton = document.createElement("button");
  deleteButton.classList = "btn btn-danger btn-delete";
  deleteButton.innerText = "Delete";
  deleteButton.dataset.id = itemId;
  return deleteButton;
}

document.body.addEventListener("click",(e) => {
  let el = e.target;
  if(el.classList.contains("btn-delete")){
      el.closest("tr").remove();

    fetch(`${baseUrl}/items/${el.dataset.id}`, {
      method: "DELETE",
    })
      .then((response) => {
        if (!response.ok) {
          throw Error("Error deleting item");
        }
        console.log("Item deleted successfully");
      })
      .catch((error) => {
        console.error(error);
      });
  }
});