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

Question

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

Ранее я попробовал то же самое, за исключением того, не наоборот - id, возвращаемый PHP, был в атрибуте class, а атрибут id имел значение «remove», и это только возвращало 0 для первой кнопки. Вторая кнопка не вызывала скрипт jQuery.

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

Answer 1

Попробуйте

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

Answer 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>

Answer 3

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

Answer 4

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

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

Answer 5

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

1. Выбрать все элементы с классом remove
2. перебирать элементы, назначение обработчика
3. нажмите на клик удалить родительский элемент
4. Вход ид консоль

(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>