Set attribute without value

Question

How do I set a data attribute without adding a value in jQuery? I want this:

<body data-body>

I tried:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

Everything else seems to add the second arguments as a string. Is it possible to just set an attribute without value?

At least if you want to use XHTML, you shouldn't do that since [attribute minimization](http://www.w3.org/TR/xhtml1/#h-4.5) is not allowed. — Matthias, Oct 31 '12 at 13:36
I'm curious to know why you need to set a new data attribute from the client side. Why not use a property? — I Hate Lazy, Oct 31 '12 at 13:41
@user1689607 because I’m saving the generated HTML as a string and need to do a reverse lookup later on. — David Hellsing, Oct 31 '12 at 13:45
@ExplosionPills One example is the `required` attribute for HTML5 form validation. I'm sure there are many other valid use cases. — Zero3, Nov 04 '15 at 15:17
Another use which I am currently looking for is setting the itemscope Microdata for google search engine, e.g. `` — WimVO, Dec 30 '15 at 20:27
Empty `data-` attributes are not necessarily valid: http://stackoverflow.com/questions/9729080/are-empty-html5-data-attributes-valid — Ciro Santilli新疆棉花TRUMP BAN BAD, May 15 '16 at 16:24

score 270 · Accepted Answer · edited May 09 '16 at 04:58

270

The attr() function is also a setter function. You can just pass it an empty string.

$('body').attr('data-body','');

An empty string will simply create the attribute with no value.

<body data-body>

Reference - http://api.jquery.com/attr/#attr-attributeName-value

attr( attributeName , value )

edited May 09 '16 at 04:58

Pang

8,605
144
77
113

answered Oct 31 '12 at 13:37

Lix

45,171
10
95
118

26

+1, but the OP knows it's a setter. The fact that passing an empty string works but `null` does not is somewhat surprising. – Jon Oct 31 '12 at 13:38
2

[Javasctipt has some weird behaviors](http://www.youtube.com/watch?v=kXEgk1Hdze0). Knowing where these oddities happen will take out the element of surprize :P – Lix Oct 31 '12 at 13:43
25

Note: This doesn't work with jQuery 1.7.2 (I know that's not the latest version) but using `$(el).prop('data-body', true)` worked for me where `$(el).attr('data-body', '')` ended up setting data-body="data-body" for me. – Patrick O'Doherty May 17 '13 at 20:33
6

@PatrickO'Doherty `$(el).prop('data-body', true)` does not work for me. `attr()` does work but it also adds an empty string as value of the attribute I want to add. – Webdevotion Oct 06 '14 at 07:49
and how does one remove the empty attribute? – Andrew Nov 08 '18 at 19:14
1

@Andrew I believe that you're looking for the [removeAttr/prop](https://stackoverflow.com/questions/13626517/remove-disabled-attribute-using-jquery?noredirect=1&lq=1) functions. It depends which attribute you're trying to remove. – Lix Nov 10 '18 at 21:30

score 55 · Answer 2 · edited Jan 24 '13 at 11:06

55

Perhaps try:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

edited Jan 24 '13 at 11:06

BoltClock

630,065
150
1,295
1,284

answered Oct 31 '12 at 13:37

Cal McLean

1,272
7
13

2

Only this solution worked for me `var btn = $(this).get(0); btn.setAttribute("disabled","");` – gkiko Sep 20 '13 at 10:55
1

After messing around with .attr and .prop, like suggested in all the other solutions and comments here, I finally found that going back (or at least "half-way" back) to native JS, did the trick, like suggested in the comment above... Cheers for that! – TheCuBeMan May 09 '16 at 09:14
`body.setAttribute("data-body","");` this will set 'false' value of my attribute, how can I set ""(empty) value of an attribute? – Archana Sharma Jul 16 '20 at 04:29

score 25 · Answer 3 · answered Sep 06 '17 at 09:53

25

The accepted answer doesn't create a name-only attribute anymore (as of September 2017).

You should use JQuery prop() method to create name-only attributes.

$(body).prop('data-body', true)

answered Sep 06 '17 at 09:53

Charlie

18,636
7
49
75

Actually, I appear to be adding "value='true'" to my select option, instead of just "value". Ugh. – RonLugge Feb 27 '18 at 20:32
i was wondering how the accepted answer did not contain this solution! it's the cleanest way using jquery. – denns Jun 19 '18 at 13:23
Doesn't work in select dropdown options, in Chrome unfortunately – MC9000 Nov 17 '19 at 22:59

score 14 · Answer 4 · edited Jun 20 '20 at 09:12

You can do it without jQuery!

Example:

document.querySelector('button').setAttribute('disabled', '');

<button>My disabled button!</button>

To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.

From MDN Element.setAttribute()

jQuery is too flakey in this regard. Best to do in javascript lest you drive yourself crazy every time jquery or browsers change. This goes for all these buggy client frameworks. — MC9000, Nov 17 '19 at 23:01

score 8 · Answer 5 · answered Mar 05 '20 at 04:29

8

Not sure if this is really beneficial or why I prefer this style but what I do (in vanilla js) is:

document.querySelector('#selector').toggleAttribute('data-something');

This will add the attribute in all lowercase without a value or remove it if it already exists on the element.

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

answered Mar 05 '20 at 04:29

Brent N.

81
1
3

I still havent found a solution. In my project I still get data-something="" when using this approach. – fonzane Apr 07 '21 at 09:44

Set attribute without value

5 Answers5

Linked

Related