动态预置和删除 JQuery/JavaScript

Dynamic prepend and remove JQuery/JavaScript

本文关键字：JQuery JavaScript 删除 动态      更新时间：2023-09-26

当我按下这段代码中的"追加/清除"按钮时，我正在尝试动态添加和删除项目。

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

尝试这样的东西：

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

$("#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等...

var btncounter = 0;             
$("#btn1").click(function(){
 btncounter++;
 $("ul").prepend("<li>List Item </li>" + btncounter);
 return btncounter;
});
$("#btn2").click(function(){
 btncounter--;
 $("ul").remove();
 return btncounter;
});
相关文章：