Question

点击添加按钮，我添加了一张用户卡。＆＃34;清除按钮＆＃34;删除所有卡。如何逐一删除卡片＆＃34;关闭＆＃34;每张卡片中的图标？

HTML文件

2.4.x

JS档案

<div class="header">
  <button id="clear" class="button clear">Clear</button>
  <button id="button" class="button add">Add user</button>
</div>
<div id="content">
</div>

Answer 1

您是否尝试在card元素中使用类？因为id选择器只获得第一个匹配元素

$.ajax({
    url: root + '/posts/1/comments',
    method: 'GET'
  }).then(function(data) {        
    $("#button").click(
      function() {
        var notificationMassage = "Oops, there are no more user cards to display";

        if (index >= data.length ) {
          return alert(notificationMassage);
        }

        $("#content").append('<div class="card"><div class="title"><div class="image"></div><div class="name">'
              + data[index].name + '</div><span class="close"></span></div><div class="description">' 
              + data[index].body + '<a href="mailto:" id="email">'
              + data[index].email + '</a></div></div>'
         );
        index++;

        // remove all cards from a list and return index equally [0], to be able add user card again.
        $("#clear").click(function() {
          $("#content").html('');
          index = 0;
        }); 
    });

逐个删除添加此代码

        // remove one cards from a list.
        $("#content").on("click", ".close", function() {
          $(this).closest('div.card').remove();
        });

Answer 2

首先，ID应该是唯一的。我建议你把它们改成班级。

Function YetToName (data As Integer(), val As Integer) As Boolean    
    Dim i As Integer

        For i = 0 To data.Length - 1    
            If data(i) = val Then    
                Return True    
            End If    
        End For

    Return False    
End Function

现在我们已经拥有了类$("#content").append('<div class="card"><div class="title"><div class="image"></div><div class="name">' + data[index].name + '</div><span class="close"></span></div><div id="description">' + data[index].body + '<a href="mailto:" id="email">' + data[index].email + '</a></div></div>' );的所有关闭图标，我们可以为所有close按钮添加以下监听器，以仅删除包含它们的卡片。

.close

Answer 3

您可以使用此代码实现您想要的内容：

$("body").on("click", ".close", function(e) {
  $(this).closest('.card').remove();
});

注意：请记住，在一个页面上只使用一个ID，而是使用类来使其工作

请参阅此CodePen

// jQuery on() method description
.on( events [, selector ] [, data ], handler )

详细了解jQuery＆＃39; on()方法。

希望这有帮助！

Answer 4

首先，您需要将id更改为class。

这是解决方案：

codepen.io/ivanchuda/pen/xRjyJp

Answer 5

首先，我会将div上的ID改为class，因为你生成了多张牌。 ID应该是唯一的。然后我会更改代码，为你的近距离添加一行：

<span class="close" onclick="$(this).parent().parent().remove()"></span>

Answer 6

试试这个

<强> See the updated codeopen

将id更改为class。与parent() of parent()匹配 on()更重要

$(document).on("click",".close",function() {
        $(this).parent().parent().remove()

        });

Answer 7

简短而不优雅的答案是：

$("#content").on("click", "span[id=close]", function() {
    $(this).closest("div[id=card]").remove();
});

这应该有效，但你需要做得比这更好。您的HTML无效，因为id应该是唯一的，并且您对不同的项目使用相同的id。您可以使用class es，或确保标识符是唯一的。请注意，如果您的HTML有效，您的搜索引擎优化将立即得到改善。如果您使用class es而不是非唯一id s，则上面的脚本将更改为此脚本：

//content is unique, therefore it can remain an id
$("#content").on("click", "span.close", function() {
    $(this).closest("div.card").remove();
});

如何逐个删除DOM树中的div元素？

7 个答案: