JQuery, используя несколько кнопок того же класса, чтобы вернуть значение

У меня есть список записей, сгенерированных PHP, каждый в своем собственном div и каждый с уникальным идентификатором. Я пытаюсь разработать вызов AJAX, который может удалить каждую запись на основе их идентификатора, однако всякий раз, когда я запускаю script ниже, он всегда возвращает 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>

Раньше я пробовал то же самое, кроме наоборот: идентификатор, возвращаемый PHP, был в атрибуте class, а атрибут id имел значение "удалить", и это только возвращало 0 для первой кнопки. Вторая кнопка вообще не вызывала jQuery script.

Как передать уникальный идентификатор одному вызову jQuery?

Ответы

Ответ 1

Попробуйте это

$(".remove").click(function() {
    var id = $(this).attr('id'); // $(this) refers to button that was clicked
    alert(id);
});

Ответ 2

Просто используйте this.id, чтобы получить идентификатор элемента

$(".remove").click(function() {
  alert(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Some entry here
  <button id="0" class="remove">Remove</button>
</div>
<div>
  Another entry here
  <button id="1" class="remove">Remove</button>
</div>

Ответ 3

Вариант ванили для будущих зрителей.

Выберите все элементы с классом remove
Итерация через элементы, назначение обработчика кликов
При щелчке удалите родительский элемент
Записать идентификатор на консоль

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');
    for ( var i in Object.keys( buttons ) ) {
        buttons[i].onclick = function() {
            this.parentElement.remove();
            console.log(this.id);
        };
    }
})();

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

Ответ 4

Вам нужно использовать ключевое слово this для ссылки на элемент с кликом:

$('.remove').click(function() {
    var id = this.id;
    // OR
    var id = $(this).attr('id');
});

Ответ 5

$(".remove").on("click",function() {
    var id = $(this).attr('id');
    console.log(id);
});