【问题标题】:How come jQuery can't remove this element?为什么jQuery不能删除这个元素?
【发布时间】:2017-05-26 06:38:36
【问题描述】:

我有一张这样的桌子:

<table id='inventory_table'>
  <tr id='no_items_avail'>
    <td>
      There are no items in the database.
    </td>
   </tr>
</table>

我想像这样用 jQuery 摆脱它:

$('#inventory_table tbody tr#no_items_avail').remove();

但它似乎根本不起作用。我做错了什么?

编辑:另外,上面的行最初是通过另一个 jQuery 调用插入到 DOM 中的:

$('#inventory_table tbody').append("<tr id='no_items_avail'.......

如果有帮助的话。并且,运行:

alert($('#no_items_avail').text());

yields “数据库中没有项目。”正如预期的那样。

【问题讨论】:

  • 好吧,如果$('#inventory_table tbody').append 有效,您应该确保文档中没有 id=no_items_avail - 不允许有非唯一 ID,这只会让人头疼。我为此推荐课程。
  • 我可以用头撞墙吗?一些复杂的引用计数代码隐藏了它在删除对象后重新创建对象的事实。我的错! (现在选择哪个答案...)

标签: jquery html-table row


【解决方案1】:

您假设 tbody 在您的 DOM 中可用。如果表不存在,只有少数浏览器会将tbody 添加到表中。试试

$('#inventory_table tr#no_items_avail').remove();

甚至更好

$('#no_items_avail').remove();

(因为无论如何 ID 都必须是唯一的)。

【讨论】:

  • 现在可以了。无论如何,简化选择器是个好主意。为此 +1。
  • 哪些浏览器不添加隐式&lt;tbody&gt;元素?
【解决方案2】:

我的猜测是您在同一个文档中多次使用同一个 ID?因为这在 IE8(兼容模式)、FF 和 Chrome 上非常适合我。

当然它不需要那么复杂,因为它完美地工作:

$("#no_items_avail").remove();

请记住,ID 必须是唯一的,复制它们是这种事情失败的常见原因。

【讨论】:

  • 如上所述,在我的编辑中,运行“alert($('#no_items_avail').text());”显示文本,证明 jQuery 正在寻找正确的元素。
  • 没关系。请参阅上面问题下的评论。感谢您在浏览器中试用。
  • 天哪,我爱你!我试图删除某个类的元素,例如 $("#parent").remove(".childType1"),$("#parent").remove(".childType2") 等等。深蹲发生了。将其更改为 $("#parent .childType1").remove() 事情进展顺利。我说重复使用相同的选择器不起作用是BS。
【解决方案3】:

您的选择器没有必要大。这更短并且有效: $('#no_items_avail').remove();​​​​​​

另外,请确保您没有其他具有相同 id 的元素。

【讨论】:

  • 我没有任何其他具有相同 id 的元素。
【解决方案4】:

尝试在您的 ID 中使用破折号“-”而不是下划线。我相信有些浏览器对下划线反应不佳。也许我正在考虑 CSS 而不是 JS,但试一试它的价值。

【讨论】:

  • 谢谢,但现在已修复。见上文。
【解决方案5】:

您的选择器引用了一个不存在的 tbody:

$('#inventory_table tbody tr#no_items_avail').remove();

删除“tbody”,它应该可以工作:

$('#inventory_table tr#no_items_avail').remove();

或者,只引用 tr ID 本身:

$('#no_items_avail').remove();

【讨论】:

    【解决方案6】:

    表格中没有&lt;tbody&gt; 标记。 jQuery 选择在没有找到后“停止”。

    【讨论】:

      【解决方案7】:

      1) 不要使用 ID 来识别 jQuery 中的内容,使用类或可能基于路径的选择。 2)不要添加和删除内容,而是显示和隐藏它。

      以任意方式动态更改您的页面内容无助于可维护性,因此我希望您所做的事情在某种程度上纪律严明,并且有据可查。想一想当你被公共汽车撞到或中彩票时必须接管的可怜草皮。

      【讨论】:

      • 你为什么要告诉别人不要使用 id 来选择?按 ID 选择是最快的方法,直接映射到 javascript 的 getElementById
      • 在任何地方都使用 ID 可能是意大利面条式代码的标志,在这种代码中,整体设计与实现的意外细节密切相关,使得结果更难更改、概括和重新应用。当然,并不总是需要这样做,无论如何这只是一个经验法则。
      • 您可能会发现这篇文章很有用:tizag.com/cssT/cssid.php。 ID 非常宝贵,应该用于识别唯一的页面元素。类用于可能重复的元素。
      • @George Cummins:在 CSS 存在之前我就知道这一点。随意不同意我写的内容,但不要认为这是基于对 ID 的用途缺乏了解。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-08-08
      • 2012-02-06
      • 1970-01-01
      • 2011-04-07
      • 1970-01-01
      • 1970-01-01
      • 2021-11-28
      相关资源
      最近更新 更多