CODEWITHSUNDEEP
javascriptjquery
Angelo Chrysoulakis
Angelo Chrysoulakis

Reputation: 946

Removing data attributes from HTML using jQuery

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:

<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:

$(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.

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.

Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...

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

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

Upvotes: 10

Views: 31590

Answers (5)

Aurovrata
Aurovrata

Reputation: 2279

(i.e., after the page is loaded, the source still shows the data-usr attribute:

the source will always show what was initially loaded on the page, and not the current state of the DOM element. If you inspect the page in your console, you should see the attribute disapear.

I use and have tested,

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

and it works as expected. An inspection of the DOM reveals the data-usr is no longer an attribute.

Upvotes: 0

James South
James South

Reputation: 10635

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.

I've just checked everything in Chrome's inspector on jsfiddle here and the attribute is definitely being removed as well as the data.

Upvotes: 0

JCOC611
JCOC611

Reputation: 19709

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

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

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.

Upvotes: 7

Sushanth --
Sushanth --

Reputation: 55740

Why don't you set the value to a random value or empty variable instead if removeAttr does not work..

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

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

Upvotes: 9

Related Questions