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

How to add a list and delete a list dynamically

本文关键字：列表 删除 删除列 添加 何动态 动态      更新时间：2023-09-26

我有一个包含<ul>的div。这个div就像一个篮子。我有一个button，上面写着"添加到收藏夹列表"，它在其中向列表中添加了一些内容。我还有一个按钮，上面写着"从最喜欢的列表中删除"，从列表中删除。

我想在<ul>中动态地附加一个文本（本质上使其成为<li>），并动态地删除它。例如，如果用户在一个名为"Terrific resort"的度假胜地页面上，则当用户按下add时，列表中应显示名称"Terrific resort"。我在代码中使用了布尔变量，这样可以防止用户多次输入resort。

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

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

<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <button id="addToFavourites">Add this to my favourites list!</button>
        </div>
        <div class="col-sm-2">
            <button id="deleteFromFavourites">Delete this from my favourites list!</button>
        </div>
        <div class="col-sm-8"> 
            <div id="cart">
                <h1 class="ui-widget-header">Favourite Resorts</h1>
                <div class="ui-widget-content">
                    <ol>
                        <li class="placeholder">Your current favourite resorts:</li>
                    </ol>
                    <ul></ul>
                </div>
            </div>
        </div>
    </div>
</div>

试试这个。

需要记住的一件事：

$("#addToFavourites").click将单击事件绑定到id为"addToFavourites"的元素。因此，$("#addToFavourites").button().click语法不正确。如果您希望以元素为目标，如果您不希望以id为目标，那么您可以执行：$("input:button").click。

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

示例：https://jsfiddle.net/DinoMyte/9w31s3zy/

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

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

https://jsfiddle.net/DinoMyte/9w31s3zy/1/

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

$('button').click(function(){
var favourite = $('<li></li>').text(this.innerHTML);
$('#fav').append(favourite);
});
$(document).on('click','#fav li',function(){
  if(confirm("Are you sure you want to remove "+$(this).text()+" ?")){
     $(this).remove();
     }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add me</button><button>or me</button><button>or me too</button>
<ul id="fav">
 <ul>

相关文章：