2

我正在使用 JQuery 的 .append() 和 .remove() 函数在 div 中添加和删除变量。

所以当里面有东西时，div看起来有点像这样：

<div id="list">
    <a>var1</a>
    <a>var2</a>
    <a>var3</a>
</div>

问题是当我在 div 中的某些东西上使用 .remove() 时，它会在 DOM 中留下一个空间。所以它看起来像这样：

var1

var3

我理解为什么会发生这种情况，但是有没有一种简单的方法可以使用另一个 JQuery 函数来解决这个问题，在我使用 .remove() 后可能会产生这样的 div 输出：

var1
var3

还是我需要做一些更复杂的事情？

4

3 回答 3

3

因为您的元素实际上被包含在包含换行符的文本节点中，正如您的 html 所说的那样。如果你不相信我：http ://tinker.io/7f667/1

\n<a>var1</a>\n<a>var2</a>\n<a>var3</a>\n

您不会在显示中注意到它们，因为 html（通常）对空格不敏感。

如果要删除周围的换行符，请告诉 DOM 删除它们：http ://tinker.io/7f667/2

//assuming `list` is your container, and `toRemove` is the element to be removed
list.removeChild(toRemove.previousSibling);
list.removeChild(toRemove.nextSibling);
list.removeChild(toRemove);

如果您选择，将其转换为 jquery 代码应该是微不足道的。请注意，周围的文本节点不是元素。

于 2013-07-12T18:12:00.530 回答
1

最简单的方法是在其中插入 parent() 以删除父容器，而不仅仅是删除变量。

所以如果你的代码是这样的：

$(myVar).remove();

...将其更改为：

$(myVar).parent().remove();

如果您需要保留该特定父容器的存在（例如您可能正在向其中添加某些内容），您可以做的其他事情是将一个类附加到隐藏容器的父容器（以及因此要删除的变量）但可以重新填充并稍后再次显示。

.deactivated { display:none; }

$(myVar).parent().addClass('deactivated');

...然后你可以这样做：

$(myVar).parent().html(newValue).removeClass('deactivated');

写完所有这些，你真的应该将父级本身缓存为一个单独的变量..但你明白了。

于 2013-07-12T18:02:58.450 回答
0 
<div id="list">
    <a>var1</a>
    <a>var2</a>
    <a>var3</a>
</div>

<script type='text/javascript'>
var var_to_remove = "var2";
//the anchor with var2 should be removed
$("#list > a").each(function()
{
  if($(this).text() == var_to_remove)
  {
    $(this).detach();
  }
});
</script>

您显然可能想更改 jquery 以使 var_to_remove 不是硬编码的。我假设您希望它位于单击处理程序或其他东西上，但这是另一种方法...

于 2013-07-12T18:54:46.520 回答