동적 추가 및 제거 JQuery/JavaScript

Question

이 코드에서 Append/Clear 단추를 누르면 항목을 동적으로 추가하고 제거하려고합니다.

List Item 1 
List Item 2 
List Item 3 

을 그럼 난 btn2를 누르면이에 의해 그들에게 하나를 제거합니다 : 나는 btn1 여러 번 누를 때처럼 후이 번호를 추가 할 수 있도록

   $("#btn1").click(function(){ 
        $("ul").prepend("<li>List Item</li>"); 
       }); 

       $("#btn2").click(function(){ 
        $("ul").remove(); 
       }); 

       $("#btn3").click(function(){ 
       $("p").prepend("Prepended items"); 
        }); 
       $("#btn4").click(function(){ 
         $("p").remove(); 
        }); 

어떻게 그것을해야합니까 하나? btn4도 마찬가지입니까?

편집 :

내 요구에 맞게 자이와 Oday의 응답을 사용했다.

var i = 1, p = 1; 

     $("#btn1").click(function(){ 
      $('<li/>',{ 
       text: "List Item "+i 
      }).appendTo('ul'); 
      i++; 
     }); 

     $("#btn2").click(function(){ 
      $("ul li:last").fadeOut('fast').remove(); 
      i--; //added this 
     }); 

     $("#btn3").click(function(){ 
      $("p").append("<span>Appended items</span>"); 
     }); 

     $("#btn4").click(function(){ 
      $("p").find('span:last').remove(); 
     }); 

Answer 1

이 같은 뭔가 시도 :

var i = 1, p = 1; 

$("#btn1").click(function(){ 
    $('<li/>',{ 
     text: "List Item "+i 
    }).appendTo('ul'); 
    i++; 
}); 

$("#btn2").click(function(){ 
    $("ul li:last").fadeOut('fast').remove(); 
}); 

$("#btn3").click(function(){ 
    $('<p/>',{ 
     text: "Prepended items "+p 
    }).appendTo('ul'); 
    p++; 
}); 

$("#btn4").click(function(){ 
    $("p").fadeOut('fast').remove(); 
}); 

Answer 2

$("#btn1").click(function(){ 
    $("ul").append("<li>List Item</li>"); 
}); 

$("#btn2").click(function(){ 
    $("ul").find('li:last').remove(); 
}); 

$("#btn3").click(function(){ 
    $("p").append("<span>Appended items</span>"); 
}); 

$("#btn4").click(function(){ 
    $("p").find('span:last').remove(); 
}); 

jQuery를 기능에 대한 자세한 내용 : 앞에 추가를 추가, 빈, 제거, 찾기, 등 ...

Answer 3

var btncounter = 0;    

$("#btn1").click(function(){ 
btncounter++; 
$("ul").prepend("<li>List Item </li>" + btncounter); 
return btncounter; 
}); 

$("#btn2").click(function(){ 
btncounter--; 
$("ul").remove(); 
return btncounter; 
});