Adding click event listener to elements with the same class

Question

I have a list view for delete id. I'd like to add a listener to all elements with a particular class and do a confirm alert.

My problem is that this seems to only add the listener to the first element with the class it finds. I tried to use querySelectorAll but it didn't work.

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

List:

<?php 
    while($obj=$result->fetch_object())
    {
        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'
            . '<a href="#" class="delete"></a>
                      </li>'."\n";
    }
    /* free result set */
    $result->close();       
    $mysqli->close();
?>

Community · Accepted Answer · 2017-05-23 12:02:47Z

168

You should use querySelectorAll. It returns NodeList, however querySelector returns only the first found element:

var deleteLink = document.querySelectorAll('.delete');

Then you would loop:

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

Also you should preventDefault only if confirm === false.

It's also worth noting that return false/true is only useful for event handlers bound with onclick = function() {...}. For addEventListening you should use event.preventDefault().

Demo: http://jsfiddle.net/Rc7jL/3/

ES6 version

You can make it a little cleaner (and safer closure-in-loop wise) by using Array.prototype.forEach iteration instead of for-loop:

var deleteLinks = document.querySelectorAll('.delete');

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

_{Example above uses Array.from and template strings from ES2015 standard.}

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Feb 11, 2014 at 11:18

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1246950 Over a year ago

i tryed that but it didnt work i did for(int i=0...)deletelink[i].addEventListener('click', function(event) { event.preventDefault(); var choice = confirm("sure u want to delete?"); if (choice) { return true; } });

dfsq Over a year ago

Take a look at the demo I've set up.

user1246950 Over a year ago

i guess i did same thing worng when i did it the first time thx u :))

Saad Over a year ago

Another neat trick is using the spread operator which works on array-like objects. So instead of Array.from(deleteLinks), you can do [...deleteLinks]. I think Array.from is clearer, but just a neat thing worth pointing out.

dfsq Over a year ago

@OlivierBoissé Because forEach is a method of Array. And when this answer was written NodeList didn't implement it. And even now it will not work in older browsers like IE something (11?).

|

jackvsworld · Accepted Answer · 2015-04-09 05:57:41Z

70

The problem with using querySelectorAll and a for loop is that it creates a whole new event handler for each element in the array.

Sometimes that is exactly what you want. But if you have many elements, it may be more efficient to create a single event handler and attach it to a container element. You can then use event.target to refer to the specific element which triggered the event:

document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("delete")) {
    var title = event.target.getAttribute("title");

    if (!confirm("sure u want to delete " + title)) {
      event.preventDefault();
    }
  }
});

In this example we only create one event handler which is attached to the body element. Whenever an element inside the body is clicked, the click event bubbles up to our event handler.

edited Apr 9, 2015 at 5:57

answered Jan 23, 2015 at 8:46

jackvsworld

1,59115 silver badges17 bronze badges

2 Comments

Vahid Amiri Over a year ago

It might be better to attach the click event to the actual parent container element instead of body.

Patrick Koorevaar Over a year ago

Typescript 3.2.4: (event.target as Element).classList

hodgef · Accepted Answer · 2018-04-30 13:44:15Z

50

A short and sweet solution, using ES6:

document.querySelectorAll('.input')
      .forEach(input => input.addEventListener('focus', this.onInputFocus));

answered Apr 30, 2018 at 13:44

hodgef

1,4462 gold badges20 silver badges31 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-02-11 11:18:58Z

7

You have to use querySelectorAll as you need to select all elements with the said class, again since querySelectorAll is an array you need to iterate it and add the event handlers

var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function (event) {
        event.preventDefault();

        var choice = confirm("sure u want to delete?");
        if (choice) {
            return true;
        }
    });
}

answered Feb 11, 2014 at 11:18

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

NemoStein Over a year ago

This answer is a bit old (3.5 years old), but I must rectify that querySelectorAll doesn't return a Array, but a NodeList, which looks like a Array but doesn't have the same methods.

Foxlab · Accepted Answer · 2020-05-07 14:03:25Z

3

(ES5) I use forEach to iterate on the collection returned by querySelectorAll and it works well :

document.querySelectorAll('your_selector').forEach(item => { /* do the job with item element */ });

answered May 7, 2020 at 14:03

Foxlab

9929 silver badges13 bronze badges

Comments

Pejman Khaleghi · Accepted Answer · 2024-03-30 09:02:55Z

You can do this by adding some methods to the NodeList prototype for doing this. I know this question is old, but this way works really well.

I created a tiny project for this purpose: https://github.com/pejman-hkh/nodelist

In this example, I add all events and the each function to the NodeList prototype.

NodeList = window.NodeList;

NodeList.prototype.each = function (callback) {
    this.forEach(function (elm, index) {
        callback.call(elm, elm, index);
    });
    return this;
};

["focusin", "focusout", "load", "beforeunload", "unload", "change", "click", "dblclick", "focus", "blur", "reset", "submit", "resize", "scroll", "mouseover", "mouseout", "mouseup", "mousedown", "mouseenter", "mousemove", "mouseleave", "contextmenu", "wheel", "keydown", "keypress", "keyup", "select"].forEach(function (name, index) {

    NodeList.prototype[name] = function (callback) {
        this.each(function (elm, index) {
            this.addEventListener(name, callback);
        });
        return this;
    }

});

document.querySelectorAll('.delete').click(function (event) {
    event.preventDefault();

    var choice = confirm("sure u want to " + this.innerHTML + "?");
    if (choice) {
        return true;
    }
})

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>

<body>
    <a href="#" class="delete">Delect1</a>
    <a href="#" class="delete">Delect2</a>
    <a href="#" class="delete">Delect3</a>
</body>

</html>

Collectives™ on Stack Overflow

Adding click event listener to elements with the same class

6 Answers 6

6 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related