Add and remove attribute with jquery

Question

This is my buttons:

<button id="add">Add</button>
<button id="remove">Remove</button>

this is my JavaScript code:

<script type="text/javascript">
    $(document).ready(function(){   
        /*** Add attribute ***/
        $("#add").click(function(){
            $("#page_navigation1").attr("id","page_navigation1");
        });     
        /*** Remove attribute ***/
        $("#remove").click(function(){
            $("#page_navigation1").removeAttr("id");
        });     
    });
</script>

and this is my html code:

<div id="page_navigation1">next</div>

My problem is, when I click on Remove button everything is fine and ID will be removed, but after click on remove button, when I click on Add button, code is not working and nothing happens!

I need to add and remove ID whith this code, but I can just Remove ID, I cant add ID. I need some help for this, and one more thing,

How I can add CSS style for button when button is Active? like this, when I click on Remove button, I want change button background to red. I need to add css class for add and remove when buttons are active! and I dont know how!

IIRC, modifying id is not possible, unless the element is created anew. — nhahtdh
– nhahtdh, Commented Jul 15, 2012 at 2:59
You can set the id attribute... but you're setting it to the element with the id "add".. if you have no element with id "add" then you can't change its attribute. You need some way of referencing the element. — sachleen
– sachleen, Commented Jul 15, 2012 at 3:00
could u please explain more? i dont know what r u saying :( and how about css style for buttons when they are active? — Ali
– Ali, Commented Jul 15, 2012 at 3:01

ThinkingStiff · Accepted Answer · 2013-02-08 19:42:36Z

86

It's because you've removed the id which is how you're finding the element. This line of code is trying to add id="page_navigation1" to an element with the id named page_navigation1, but it doesn't exist (because you deleted the attribute):

$("#page_navigation1").attr("id","page_navigation1");

Demo:

If you want to add and remove a class that makes your <div> red use:

$( '#page_navigation1' ).addClass( 'red-class' );

And:

$( '#page_navigation1' ).removeClass( 'red-class' );

Where red-class is:

.red-class {
    background-color: red;
}

edited Feb 8, 2013 at 19:42

answered Jul 15, 2012 at 3:00

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

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

Comments

Sean Vieira · Accepted Answer · 2012-07-15 03:08:06Z

31

Once you remove the ID "page_navigation" that element no longer has an ID and so cannot be found when you attempt to access it a second time.

The solution is to cache a reference to the element:

$(document).ready(function(){
    // This reference remains available to the following functions
    // even when the ID is removed.
    var page_navigation = $("#page_navigation1");

    $("#add").click(function(){
        page_navigation.attr("id","page_navigation1");
    });     

    $("#remove").click(function(){
        page_navigation.removeAttr("id");
    });     
});

edited Jul 15, 2012 at 3:08

answered Jul 15, 2012 at 3:00

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

Comments

Brad Larson · Accepted Answer · 2014-08-20 22:23:22Z

7

First you to add a class then remove id

<script type="text/javascript">
$(document).ready(function(){   
 $("#page_navigation1").addClass("page_navigation");        

 $("#add").click(function(){
        $(".page_navigation").attr("id","page_navigation1");
    });     
    $("#remove").click(function(){
        $(".page_navigation").removeAttr("id");
    });     
  });
</script>

edited Aug 20, 2014 at 22:23

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Jun 5, 2014 at 17:06

Shafiqul Islam

5,6852 gold badges36 silver badges45 bronze badges

Comments

xdazz · Accepted Answer · 2012-07-15 03:01:32Z

5

If you want to do this, you need to save it in a variable first. So you don't need to use id to query this element every time.

var el = $("#page_navigation1");

$("#add").click(function(){
  el.attr("id","page_navigation1");
});     

$("#remove").click(function(){
  el.removeAttr("id");
});

answered Jul 15, 2012 at 3:01

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

Add and remove attribute with jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related