Question

我有div，其中包含<ul>。这个div就像一个篮子。我有一个button，其中显示“添加到收藏列表”，其中添加了一些内容。我还有一个按钮，其中显示从列表中删除的“从收藏列表中删除”。

我想动态地在<ul>内附加一个文本（基本上将其设为<li>）并动态删除它。例如，如果用户位于名为“Terrific Resort”的度假村的页面上，那么当用户按下add时，名称“Terrific 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>

Answer 1

试试这个。

要记住一件事：

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: