Question

我只会发布相关的代码。如果您需要我的全部代码，请告诉我。

无论如何，我有以下代码：

 var deck = [];
 var c = 0;
$('#add').click(function(){
     var addToDeck = $('input[name=searchItem]').val();
     addToDeck = addToDeck.toLowerCase();
     deck.push(addToDeck);
   $('#save').append('<div id="cardList' + (c++) + '">' + database[deck[deck.length-1]].name + '</div>');
 });

每次按下某个按钮时，动态添加具有唯一ID的div（例如：cardList1，cardList2等）。现在，如果用户点击某个具有特定ID的div（比如cardList2），我想将其从列表中删除。

我试过这样的事情：

  $(document).on('click','#save', function(){
   $('#cardList' + 'c').remove();
  });

但它不起作用。我想我的方向是正确的。

只是为了重新迭代，这是一个卡片游戏卡片构建应用程序......所以我想让用户通过点击带卡片的div来移除已经在他们牌组中的卡片，从而使用户更容易ID。

Answer 1

在您的第二个代码示例中，c未定义或没有您期望的值。这应该工作：

$('#save').on('click','[id^=cardList]', function(){
   $(this).remove();
});

它将侦听所有ID为cardList且元素为#save的后代的元素上的点击事件（而不是点击#save上的点击）。它变得更简单，因为this将仅引用被单击的元素并且您要删除它。

您还可以为元素添加一个额外的类，并使用它而不是attribute-starts-with selector：

// for example
$('<div />', {
    id: 'cardList' + (c++), 
    'class': 'myclass', 
    text: database[deck[deck.length-1]].name
}).appendTo('#save');

// somewhere else

$('#save').on('click','.myclass', function(){
   $(this).remove();
});

您还应该考虑是否需要唯一的ID。

Answer 2

将新div创建为jQuery对象：

$('#save').append('<div>', {'id':'cardList' + (c++)});

然后它将是可访问的。

如何删除具有唯一ID的动态创建的div？

2 个答案: