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

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函数的更多信息：append，prepend，remove，empty，find等...

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

动态前置和删除JQuery / JavaScript

3 个答案: