jQuery removeAttribute() not working

Question

I have been searching desperately for an answer to this question, but not found anything. I am currently improving the code on a website I'm creating, switching from ,,custom'' attributes to the HTML5 data-yyy attributes. Now heres my problem.

 $("#test ul li").click(function(event){
        $(this).toggleClass("selected");
        if($(this).hasClass("selected")){
            if(jQuery.trim($("#input_value").val())){
                $(this).data("special",{"value":jQuery.trim($("#input_value").val())});
            }
        }
        else{
            $(this).removeAttr("data-special");
        }
    });

The following code is fired when a certain li-element is clicked. A class is toggled, and after the toggling (is that a word?) the script checks if this element has the toggled class or not. If it does not have the class (that's where the problem is), the script should remove the attribute "data-special", deleting the data. This does not happen at all!

If add

 $("#test ul li").removeAttr("data-special");

outside the function, it's all fine and works as expected. Any ideas?

user1106925 · Accepted Answer · 2012-02-17 01:17:49Z

4

You've imported the data-special value into .data(), so use .removeData().

$(this).removeData("special");

Once you've imported an attribute value into .data(), you need to work with it there. Removing the attribute doesn't remove the .data().

If you needed them both removed, then you'd need to call both methods, or simply don't use .data() in the first place.

answered Feb 17, 2012 at 1:17

user1106925

Sign up to request clarification or add additional context in comments.

3 Comments

Benedikt Ómarsson Over a year ago

Thank you! Funny enough, this is what I started doing, I must have had a bug in my code since it didn't seem to work, when it didn't I googled for an answer and found this: bugs.jquery.com/ticket/10784 and I understood (or misunderstood) this as to treat the data-yyy as an attribute on removal. One more thing ,,or simply don't use .data() in the first place''. Should I not use .data()? You don't like it?

user1106925 Over a year ago

@BenediktÓmarsson: You're welcome. With respect to using .data(), it can be useful if you're needing to store complex data. For example, you seem to be storing an object. {value:"the special value"} If you're actually needing an object where properties are added and removed, then .data() may be useful. But if all you're ever doing is reading the value of that one data- attribute, then I'd probably just use .attr() since it's a little quicker, and doesn't add anything extra to jQuery.cache.

Benedikt Ómarsson Over a year ago

I understand. The ,,application I am writing is a bit on the complex side (at least for me, new in the business). I used to user .attr() and I used custom attributes, something like <div section="1" paperid="12" somethingelse="not important">somevalue</div>. However, when using w3c tools to validate my code, it always complains about these attributes since they ,,don't exist''. After that I got the impression that adding custom attributes, although possible, was a dirty trade. Is this not true? Thank you in advance for your help and comments.

Al Katawazi · Accepted Answer · 2012-02-17 01:22:27Z

1

This isn't an attribute

$(this).data("special",{"value":jQuery.trim($("#input_value").val())});

Your are storing this in the jquery cache. therefore if you want to remove it you have to do as the other poster indicated and use the removeData function to eliminate it.

answered Feb 17, 2012 at 1:22

Al Katawazi

7,2608 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery removeAttribute() not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related