How can I do multiple delete in js?

Question

I want to have a confirmation before deleting an account. How can I do it?

This is the picture for the UI of the accounts. enter image description here

This is the html code.

<a href="uses_script.php?user_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['user_username']; ?>" 
                      id = "del"
                      data-toggle="tooltip" 
                      data-placement="top" 
                      title="Delete"> 
                      <i class="mdi mdi-close"></i></a>

This is the javascript.

const deleteIcon = document.querySelectorAll("del");
deleteIcon.addEventListener("click", (e) => {
  const confirmVar = confirm("Do you want to proceed? ");
  if (!confirmVar) e.preventDefault();
}

What I want to do is before deleting users I want to have a confirmation that when I click OK it will delete and when I click cancel it will just close.

How you added event for array of elements ? You should loop first - also what do you expect to select is there's a tag in your page called `del` ? You should forget about `querySelectorAll` when you select just one element and use `querySelector` like `document.querySelector("#del")` also close the parentheses of `addEventListener()` — JS_INF, Sep 02 '21 at 23:55

score 2 · Accepted Answer · answered Sep 03 '21 at 00:20

This might be the correct code.

const deleteIcon = document.querySelectorAll("#del");
deleteIcon.forEach ((element) => {
  element.addEventListener("click", (e)=>{  
  const confirmVar = confirm("Do you want to proceed?");
  if (!confirmVar){ e.preventDefault();}})
})

I have iterated through the buttons to add the event listener for each of them and I have also added the e parameter so that it identifies the event.

NOTE: addEventListener doesn't work for a collection of elements. You will have to iterate through each element.

LW001 · Answer 2 · 2021-09-03T00:06:14.390

Your listener is not applied to the element correctly.

Use a # in your Query Selector to target an element by ID:

const deleteIcon = document.querySelector("#del");

However, as there are multiple lines it might not be the best idea to use an ID for the delete button, use a class instead.

Add class="del" (or a class name of your choosing) to your <a> element and use the following Query Selector (using a . means selecting a class):

const deleteIcons = document.querySelectorAll(".del");

This will return a list of elements you can later iterate over to add event listeners to it:

deleteIcons.forEach(function(element) {
    element.addEventListener("click", (e) => {
        const confirmVar = confirm("Do you want to proceed? ");
        if (!confirmVar) e.preventDefault();
    });
});

How can I do multiple delete in js?

2 Answers2