动态添加和移除 JQuery/JavaScript 的前置内容

Question

我正在尝试在这段代码中按下“添加/清除”按钮时动态添加和删除项目。

                $("#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();
                     });

我应该如何设置，使得当我多次按下 btn1 按钮时，它会自动添加一个数字在后面，例如：

List Item 1
List Item 2
List Item 3

如果我按下btn2，它会一个接一个地删除它们？对于btn4也是一样吗？

编辑：

我使用了Jai和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();
        });

- user3606724

Answer 1

$("#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函数的知识：append、prepend、remove、empty、find等...

- Oday Fraiwan

Answer 2

尝试使用类似以下的内容：

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();
});

- Jai

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;
});

- Michelangelo