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!

Answer 1

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; } 

Answer 2

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");     });      });