使用 jQuery 从 HTML 中删除数据属性答案

【问题标题】：Removing data attributes from HTML using jQuery使用 jQuery 从 HTML 中删除数据属性
【发布时间】：2012-09-20 23:17:44
【问题描述】：

似乎无法让这个工作......

我有一个隐藏某些链接的页面。加载 DOM 后，我使用 jQuery 来切换其中一些元素。这是通过使用如下数据属性驱动的：

<div class="d_btn" data-usr='48'>
  <div class="hidden_button">

然后，我有代码：

  $.each($(".d_btn"), function() {
     var btn = $(this).data('usr');
   if ( btn == '48' ){      
     $(this).children('.hidden_button').toggle();
   }

以上所有工作都按计划进行。问题是我试图在评估 if 语句后从类 .d_btn 中删除 data-usr 。我尝试了以下方法，但没有任何效果（即，加载页面后，源仍然显示 data-usr 属性：

$(this).removeAttr("data-usr");

$(this).removeData("usr");

我已经为此工作了几个小时，但……没有！非常感谢您的帮助！

更新

我已经尝试了将数据属性设置为空字符串的好建议，但我仍然没有得到想要的结果。

为了进一步解释，我试图删除该属性的原因是，当 ajax 响应向页面添加另一个项目时，先前添加的项目已经显示或隐藏了按钮。根据 AJAX 响应，一旦加载 DOM，我将调用相同的函数。

目前，当通过 AJAX 添加内容时，它会切换所有按钮（显示隐藏的按钮，反之亦然。）呃...

我也完全愿意尝试替代我的方法。谢谢！

更新

嗯，灯泡刚刚闪了一下，我可以通过使用 .show() 而不是 .toggle() 来做我想做的事情

无论如何，我仍然想找到这个问题的答案，因为每当添加某些内容时，该页面可能会检查数百个项目 - 这似乎非常低效（即使对于计算机，哈哈哈。）

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果 removeAttr 不起作用，为什么不将值设置为随机值或空变量..

$(this).attr("data-usr" , '');

$(this).prop("data-usr" , '');

【讨论】：

但是当 data-usr 为空时，我猜它不会正确地命中 if 循环。所以该特定 div 的按钮状态不会被切换 .. 你能构造一个 fiddle if我在想什么是错的？？
这正是我的想法，但它不是那样工作的。 Undefined 在上面的回复中创建了一个小提琴：jsfiddle.net/VVbFG
您能否使用与 ajax 请求一起进行的整个逻辑来更新您的代码..

【解决方案2】：

更改 DOM 不会影响源。它会影响 DOM，您可以使用 Inspector/Developer Tools 查看。右键单击 => 查看源代码将为您提供页面的原始源代码，而不是 JavaScript 修改的实际当前源代码。

【讨论】：

谢谢 - 这真的很有帮助！我已经用更多信息更新了我的帖子。

【解决方案3】：

设置为空字符串：

$(this).attr("data-usr", "");

我赞同 Kolink 所说的：检查 DOM，而不是源。（Chrome：Ctrl + Shift + i）。

【讨论】：

【解决方案4】：

正如其他人所说。检查来源只会显示网页的原始未经编辑的来源。您需要做的是使用开发人员工具检查 DOM。

我刚刚在 jsfiddle here 上检查了 Chrome 的检查器中的所有内容，并且该属性和数据肯定都被删除了。

【讨论】：

谢谢 - 那么也许我的推理有问题？不幸的是，我不知道如何检查 DOM（在 firebug 上尝试过，但无法做出正面或反面）...
在 Firefox 中，您应该能够右键单击页面中的元素并选择“Inspect Element with Firebug”。然后，您将看到页面的标记本地化为您选择的元素。
很好 - ^ 谢谢好友 ^ 我刚刚检查过，你是对的 - 数据属性已被删除。这证实了我的结论，即我的推理有问题。现在的问题是，为什么当通过 AJAX 添加新项目并且我调用相同的函数时，循环是否在所有项目上运行并且所有内容都被切换？
嗯...您是只添加一个实例还是覆盖所有 html？您能否在小提琴中发布更完整的代码示例？
再次感谢 - 不幸的是，没有更多要发布的内容了...当返回 AJAX 响应时，将使用与最初加载页面时相同的部分（模板）。我认为通过在 if 语句运行后删除数据元素，在对新添加的元素调用 unhide 函数时，它会跳过原始项目。但是，不幸的是，情况似乎并非如此。由于某种原因，数据似乎仍然绑定到 DOM 元素（即使我们无法通过检查看到它。）我很困惑。