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

Question

У меня проблемы с удалением первого элемента в списке при нажатии на кнопку. Я знаю, что есть решение относительно этой проблемы. Тем не менее, я просто мог бы понять, что-то вроде этого. Кнопка zap имеет класс id = "zap"

$(".zap").click(function(){
    $("li").first().remove();
});

<button id="zap">Zap</button>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>   

Answer 1

Удалить первый элемент разных типов.

jQuery( document ).ready(function(){

    //method 1
   jQuery("#zap").on("click", function(){
        jQuery("li:eq(0)").remove();
   });

   //method 2
   jQuery("#zap").on("click", function(){
        jQuery("li:first").remove();
   });

   //method 3
   jQuery("#zap").on("click", function(){
        jQuery("li").first().remove();
   });
  //Method 4 
   jQuery("#zap").on("click", function(){
      jQuery("li:first-of-type").remove();
   });  

});

Answer 2

У вашей кнопки есть идентификатор, поэтому вам нужно привязать событие к идентификатору. Кроме того, JQuery должен быть заключен в функцию document.ready:

$( document ).ready(function(){
   $("#zap").on("click", function(){
	    $("li").first().remove();
   });
});

<button id="zap">Zap</button>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>