使用 JQuery 动态添加按钮而不使用 .append

Question

我有一个场景，我想要一个按钮出现，但是这个场景是循环的。

目前我的代码如下所示：

var r = $('<input type="button" value="Done swapping"/>');
$('#doneSwapping').append(r);

我只希望按钮出现一次，但由于使用 .append，它会在每次迭代期间不断添加，从而产生多个按钮。

有办法解决这个问题吗？也许在循环结束时再次删除按钮？我确实尝试了 .remove 但这似乎删除了整个 'doneSwapping' 引用而不仅仅是按钮。

谢谢:)

Answer 1

首先尝试将它移到循环外。如果你不能点帽子，那么在添加之前检查它是否已经添加。您可以像我使用的那样使用按钮的某些属性 class

var r = $('<input type="button" value="Done swapping" class="cls"/>');
if($('#doneSwapping .cls').length == 0)
    $('#doneSwapping').append(r);

Answer 2

你需要使用.empty()它不会破坏结构，但会破坏其中的内容。

$('#doneSwapping').empty();

.remove() 会破坏容器。

Adding a button dynamically with JQuery without using .append