Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery using multiple buttons of the same class to return a value [duplicate]

Tags:

People also ask

What is jQuery function?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.


I have a list of entries generated by PHP, each in its own div and each with a unique ID. I'm trying to develop an AJAX call that can remove each entry based on their ID, however whenever I run the script below, it always returns 0.

<div>
    Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>
    Another entry here
    <button id="1" class="remove">Remove</button>
</div>
// ... and so on

<script>
    $(".remove").click(function() {
        var id = $(".remove").attr('id');
        alert(id); // debug
        // AJAX call here
    });
</script>

Previously I tried the same thing except for the other way around - the id returned by PHP was in the class attribute and the id attribute had the value 'remove' and this only returned 0 for the first button. The second button didn't invoke the jQuery script at all.

How can I pass a unique ID to the same jQuery call?