By David Hellsing


2012-10-31 13:32:15 8 Comments

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?

4 comments

@LipESprY 2019-03-24 06:10:56

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()

@MC9000 2019-11-17 23:01:24

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.

@Charlie 2017-09-06 09:53:59

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)

@RonLugge 2018-02-27 20:32:31

Actually, I appear to be adding "value='true'" to my select option, instead of just "value". Ugh.

@denns 2018-06-19 13:23:30

i was wondering how the accepted answer did not contain this solution! it's the cleanest way using jquery.

@MC9000 2019-11-17 22:59:51

Doesn't work in select dropdown options, in Chrome unfortunately

@Lix 2012-10-31 13:37:00

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 )

@Jon 2012-10-31 13:38:58

+1, but the OP knows it's a setter. The fact that passing an empty string works but null does not is somewhat surprising.

@Lix 2012-10-31 13:43:00

Javasctipt has some weird behaviors. Knowing where these oddities happen will take out the element of surprize :P

@Patrick O'Doherty 2013-05-17 20:33:34

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.

@Webdevotion 2014-10-06 07:49:00

@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.

@Andrew 2018-11-08 19:14:11

and how does one remove the empty attribute?

@Lix 2018-11-10 21:30:27

@Andrew I believe that you're looking for the removeAttr/prop functions. It depends which attribute you're trying to remove.

@Callum McLean 2012-10-31 13:37:58

Perhaps try:

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

@gkiko 2013-09-20 10:55:45

Only this solution worked for me var btn = $(this).get(0); btn.setAttribute("disabled","");

@TheCuBeMan 2016-05-09 09:14:03

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!

Related Questions

Sponsored Content

35 Answered Questions

[SOLVED] $(document).ready equivalent without jQuery

  • 2009-04-28 21:51:11
  • FlySwat
  • 984179 View
  • 1933 Score
  • 35 Answer
  • Tags:   javascript jquery

54 Answered Questions

47 Answered Questions

25 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

23 Answered Questions

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

13 Answered Questions

[SOLVED] How to know if an object has an attribute in Python

  • 2009-03-04 14:45:59
  • Lucas Gabriel Sánchez
  • 788211 View
  • 1498 Score
  • 13 Answer
  • Tags:   python attributes

20 Answered Questions

[SOLVED] jQuery get specific option tag text

16 Answered Questions

[SOLVED] Change the selected value of a drop-down list with jQuery

24 Answered Questions

[SOLVED] Is Safari on iOS 6 caching $.ajax results?

Sponsored Content