为什么我不能添加一个元素，删除它，然后第二次添加相同的元素?

Why can't I append an element, remove it, then append the same element a second time?

本文关键字：添加 元素 第二次 然后 删除 为什么 一个 不能      更新时间：2023-09-26

在下面提供的代码中，您将看到一个由各种磁贴组成的地图。点击贴图会"选中"它。

我希望发生什么:

  1. 点击贴图
  2. 按"放置"键
  3. 一个石油井架出现在那块砖上
  4. 按"删除"按钮
  5. 井架消失
  6. 点击另一个贴图
  7. 按"放置"键
    8. 一个新的油井井架出现在那片土地上

程序一直运行到步骤7-8。由于某种原因，石油井架没有再出现。

我设置了Place和Remove按钮，以便一次只能在地图上显示一个井架。要移除一个石油井架，我不希望在移除之前选择上面有石油井架的瓦片(因此，你可以选择不同的瓦片，点击移除仍然会移除石油井架，不管它在哪个瓦片上)。

我认为问题是石油井架第二次没有正确安装。这可能是因为它被删除的方式。

http://jsfiddle.net/briz/jdhPW/17/

On a side not，我意识到如果在tile被选中之前按下Place按钮会有一个潜在的bug。

有很多方法可以解决这个问题。我认为最简单的是$('. oilderrick ').hide()而不是remove()。另一种方法是附加克隆并更改类名，但这需要更改更多的代码。

更新: http://jsfiddle.net/jdhPW/19/

看起来您期望$('.oilDerrick')即使在.remove() d之后也选择石油井架元素。事实并非如此，因为石油井架元素在那时不再是DOM的一部分。您需要在.remove()之后保存对它的引用，然后在对append的调用中使用该引用。或者你可以直接隐藏它

另一个选择是使用.append()来删除元素。我知道这听起来像你想做的相反，但是当你在一个现有的元素上使用.append()时，它会从当前的父元素中删除它，并将它添加到新的父元素中。(除非新的父选择器匹配多个父元素，在这种情况下会复制子元素。)

所以你可以设置一个"staging area"div，它有display:none。任何元素都像你的"。动态添加到tile中的"oilDerrick"元素将作为"staging area"的子元素开始，因此会自动隐藏，并且不会与任何特定的tile元素相关联。当你将.append()设置为一个tile元素，它会自动从"staging area"div中移除。"oilDerrick"刚从瓷砖.append()回到"集结区"。"。"oilDerrick"div不需要用CSS显式隐藏，因为所有的"staging area"div的子div都是隐藏的，所以你甚至不需要.show()和.hide()(除非你特别想要添加和删除动画)。

假设你完成的游戏更复杂，并且有其他对象可以添加到贴图中，这也会让你更容易找到所有当前未使用的对象:只需枚举"暂存区域"的当前子对象。

无论如何，我知道你已经接受了一个答案，但我只是觉得你可能会喜欢其他的想法。

相关文章：