Javascript 使用 jQuery 从 HTML 中删除数据属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12522293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing data attributes from HTML using jQuery
提问by Angelo Chrysoulakis
Can't seem to get this one to work...
似乎无法让这个工作......
I have a page that hides certain links. When the DOM is loaded, I'm using jQuery to toggle some of those elements. This is driven by using a data attribute like so:
我有一个隐藏某些链接的页面。加载 DOM 时，我使用 jQuery 来切换其中一些元素。这是通过使用像这样的数据属性来驱动的：
<div class="d_btn" data-usr='48'>
<div class="hidden_button">
Then, I have the code:
然后，我有代码：
$.each($(".d_btn"), function() {
var btn = $(this).data('usr');
if ( btn == '48' ){
$(this).children('.hidden_button').toggle();
}
The above all works as planned. The problem is that I am trying to remove the data-usr from the class .d_btn once the if statement is evaluated. I've tried the following and nothing works (i.e., after the page is loaded, the source still shows the data-usr attribute:
以上都按计划进行。问题是，一旦评估了 if 语句，我就试图从 .d_btn 类中删除 data-usr。我已经尝试了以下但没有任何效果（即，页面加载后，源仍然显示 data-usr 属性：
$(this).removeAttr("data-usr");
$(this).removeData("usr");
I've been working on this for a couple of hours now and...nothing! Help is greatly appreciated!
我已经为此工作了几个小时，但……什么都没有！非常感谢帮助！
UPDATE
更新
I've tried the great suggestions of setting the data attribute to an empty string but I'm still not getting the desired result.
我已经尝试了将 data 属性设置为空字符串的好建议，但我仍然没有得到想要的结果。
To explain a little further, The reason I'm trying to remove the attribute is so when an ajax response adds another item to the page, the previously added items would already have the button either shown or hidden. Upon AJAX response, I'm calling the same function once the DOM is loaded.
进一步解释一下，我尝试删除该属性的原因是，当 ajax 响应向页面添加另一个项目时，之前添加的项目已经显示或隐藏了该按钮。在 AJAX 响应时，一旦加载了 DOM，我就会调用相同的函数。
Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...
目前，当通过 AJAX 添加某些内容时，它会切换所有按钮（显示隐藏的按钮，反之亦然。）呃...
I'm also fully willing to try alternatives to my approach. Thanks!
我也完全愿意尝试替代我的方法。谢谢！
UPDATE
更新
Well, the light bulb just flashed and I am able to do what I want to do by just using .show() instead of .toggle()
好吧，灯泡刚刚闪烁，我可以通过使用 .show() 而不是 .toggle() 来做我想做的事情
Anyway, I'd still like to find an answer to this question because the page will be potentially checking hundreds of items whenever something is added - this seems horribly inefficient (even for a computer, hahaha.)
无论如何，我仍然想找到这个问题的答案，因为每当添加内容时，页面可能会检查数百个项目 - 这似乎效率极低（即使对于计算机，哈哈哈。）
采纳答案by Niet the Dark Absol
Changing the DOM doesn't affect the source. It affects the DOM, which you can view with the Inspector/Developer Tools. Right click => View Source will give you the original source of the page, not the actual current source as modified by JavaScript.
更改 DOM 不会影响源。它会影响 DOM，您可以使用 Inspector/Developer Tools 查看。右键单击 => 查看源代码将为您提供页面的原始源代码，而不是由 JavaScript 修改的实际当前源代码。
回答by Sushanth --
Why don't you set the value to a random value or empty variable instead if removeAttr does not work..
如果 removeAttr 不起作用，为什么不将该值设置为随机值或空变量呢？
$(this).attr("data-usr" , '');
$(this).prop("data-usr" , '');
回答by JCOC611
Set it to a blank string:
将其设置为空字符串：
$(this).attr("data-usr", "");
I second what Kolink said: check the DOM, not the source. (Chrome: Ctrl + Shift + i).
我支持 Kolink 所说的：检查 DOM，而不是源。（铬：Ctrl + Shift + i）。
回答by James South
As others have stated. Checking the source will only show the original unedited source for the webpage. What you need to do is check the DOM using developer tools.
正如其他人所说。检查来源只会显示网页的原始未编辑来源。您需要做的是使用开发人员工具检查 DOM。
I've just checked everything in Chrome's inspector on jsfiddle hereand the attribute is definitely being removed as well as the data.
我刚刚检查了Chrome的督察一切对的jsfiddle这里，属性绝对正以及数据删除。
