Javascript 如何动态添加列表和删除列表

我有一个

div

，它包含

。这个

div

就像一个篮子。 我有一个

按钮

，上面写着“添加到收藏夹列表”，在这个按钮中，它向列表中添加了一些内容。我还有一个按钮，上面写着“从收藏夹列表中删除”，它从列表中删除

我想动态地在

中添加一个文本（本质上是将它变成

），并动态地删除它。例如，如果用户在一个关于一个名为“Great resort”的度假村的页面上，那么当用户按add时，“Great resort”的名称应该出现在列表中。我在代码中使用了Boolean变量，这样可以防止用户多次输入度假村

到目前为止，这就是我所拥有的。这不是我的完整代码，但我可以向您保证，我已正确加载了所有脚本：

var added = false;
var deleted = true;

$("#addToFavourites").button().click(function(event) {
    if (added == false) { 
        added = true;
        alert("You clicked on the add button");
        $("#cart").find("ul").append(erer);
    }
});

$("#deleteFromFavourites").button().click(function(event) {
    if (added == true){ 
        added = false;
        alert("You clicked on the delete button");
    }
}); 

将此添加到我的收藏夹列表中！
将此从我的收藏夹列表中删除！
最受欢迎的度假村
您当前最喜爱的度假胜地：

我想这可能就是你想要的。动态元素的问题是，如果您的事件处理程序未绑定到文档，那么元素将不会有事件，因为绑定事件时它不存在

$（“按钮”）。单击（函数（）{
var favorite=$（'
'）.text（this.innerHTML）；
$（'fav'）。附加（收藏夹）；
});
$（文档）.on（'click'，'fav li'，函数（）{
if（确认（“是否确实要删除“+$（this）.text（）+”？”）{
$（this.remove（）；
}
});

加上我或我或我也是

试试这个

有一件事要记住：

$（“#addToFavourites”）。单击
将单击事件绑定到id为“
addToFavourites
”的元素。因此，
$（“#addToFavourites”）.button（）。单击语法不正确。如果希望以元素为目标，如果不希望以id为目标，则可以执行：
$（“输入：按钮”）。单击

var added = false;
var deleted = true;
var count= 0;

$("#addToFavourites").click(function(event) {
count++;
var erer = '<li class="placeholder" id' + count + '>Favourite ' + count  + '</li>';
    if (added == false) { 
        added = true;
        alert("You clicked on the add button");
        $("#cart").find("ul").append(erer);
    }
});

$("#deleteFromFavourites").click(function(event) {
    if (added == true){ 
        added = false;
        alert("You clicked on the delete button");
        $("#cart").find("ul li:last").remove();
        count--;
    }
});

var added=false；
var deleted=true；
var计数=0；
$（“#addToFavourites”）。单击（函数（事件）{
计数++；
var erer='
最喜爱的'+count+'
'；
如果（added==false）{
添加=真；
警报（“您单击了添加按钮”）；
$（“#cart”）.find（“ul”）.append（erer）；
}
});
$（“#删除收藏夹”）。单击（函数（事件）{
如果（added==true）{
添加=错误；
警报（“您单击删除按钮”）；
$（“#购物车”）.find（“ul li:last”）.remove（）；
计数--；
}
});

例如：

更新：如果要添加多个项目并删除它们：

var count= 0;

$("#addToFavourites").click(function(event) {
count++;
var erer = '<li class="placeholder" id=' + count + '>Favourite ' + count  + '</li>';
        $("#cart").find("ul").append(erer);
        $(".placeholder").on("click",function(event) {
        $(this).remove();    
       });    
});

var计数=0；
$（“#addToFavourites”）。单击（函数（事件）{
计数++；
var erer='
favorite'+count+'
；
$（“#cart”）.find（“ul”）.append（erer）；
$（“.placeholder”）。在（“单击”）上，函数（事件）{
$（this.remove（）；
});    
});

您的代码有什么特殊问题吗？您能把一个JSFIDLE的插件放在一起吗？@Rorymcrossan没有特殊问题。脚本中的中的警报框用于测试目的，以查看用户是否能够添加同一属性的多个值。我想做的是在
中添加一个文本，但不确定如何做您想添加什么文本？我看不出在哪里定义了
erer
。@RoryMcCrossan哦，那应该是一个字符串。我看到如果用户点击了添加按钮，文本erer应该出现在列表上。我知道你在那里做了什么。我将尝试执行您的步骤，并让您知道它是如何运行的：）在第二行代码中，我是否可以将'this.innerHTML'更改为字符串文本，如'superic Resort'？@TarikhChouhan您可以将其更改为您想要的任何内容我只需选择从中单击任何按钮的文本确定我已通过您的方法使添加部分正常工作。我现在需要有删除按钮来删除通过添加按钮添加的度假村。我正在考虑遍历ul并在ul中循环，直到找到一个与add按钮添加的名称匹配的字符串。这是有效的吗？如果你100%确定你永远不会有名字冲突，那就好了，因为这会产生一个bug。最好在创建时为li提供一个类似id的属性，并直接将其作为目标。谢谢您的输入。我将在
中添加其他度假村，这样删除按钮就不必工作，因为只会删除最后添加的度假村。在列表中循环找到一个要删除的特定方法就足够了吗？检查更新后的解决方案并进行修改。如果您希望添加多个项目并将其删除，那么在每个动态创建的“li”上委派一个单击事件是有意义的，当您单击它时，该事件将删除它。