Hide attribute of an element from DOM

Question

As the title says, I would like to add a new hidden attribute to an element. To avoid any confusion, I want the attribute to be hidden, not the element.

I have a div: <div id="hello_div">Hello!</div>

I add an attribute: $('#hello_div').attr('my_attr', 'attr_value');

So I can get it later: var v = $('#hello_div').attr('my_attr');

It works as expected but if you inspect the div in the DOM Explorer, you see:

<div id="hello_div" my_attr="attr_value">Hello!</div>

Is there any way to hide this attribute?

Try removeattribute as described [here] http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_removeattribute — developer, Jun 02 '15 at 12:42

nhaa123 · Accepted Answer · 2015-06-02T12:42:59.820

5

You can't hide DOM-attributes, but as I see you are using jQuery, you could try data. E.g.

$('#hello_div').data('my_attr', 'attr_value');

and later retrieve:

var v = $('#hello_div').data('my_attr');

edited Jun 02 '15 at 12:42

answered Jun 02 '15 at 12:36

nhaa123

9,570
11
42
63

Exactly what I was looking for! – Arthur Rey Jun 02 '15 at 12:38
any vanilla javascript solution? – Colin D Dec 02 '17 at 13:57

score 2 · Answer 2 · answered Jun 02 '15 at 12:37

2

When you get back your required attribute var v = $('#hello_div').attr('my_attr');

remove the attribute after this $('#hello_div').removeAttr('my_attr');

answered Jun 02 '15 at 12:37

danish farhaj

1,316
10
20

score 0 · Answer 3 · answered Jun 02 '15 at 12:35

0

No. If you manipulate the DOM by adding an attribute, it will always be visible when using a DOM inspector like Chrome developer tools etc.

answered Jun 02 '15 at 12:35

B_s

3,026
5
32
51

Hide attribute of an element from DOM

3 Answers3