使用jquery添加和删除属性

这是我的按钮：

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

这是我的JavaScript代码：

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

这是我的HTML代码：

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

我的问题是，当我点击删除按钮一切都很好，ID将被删除，
但是点击删除按钮后，当我点击添加按钮，代码不工作，没有任何反应！

我需要添加和删除ID的这个代码，但我可以只删除ID，我无法添加ID。我需要一些帮助，这一点，还有一件事，

当按钮处于活动状态时，如何为按钮添加CSS样式？
像这样，当我单击删除按钮，我想更改按钮背景为红色。我需要添加css类添加和删除时，按钮是活动的！我不知道如何！

解决方法

这是因为你已经删除了id，这是你如何找到元素。这行代码试图将id =“page_navigation1”添加到名为page_navigation1的元素，但它不存在(因为您删除了该属性)：

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

演示：

如果您要添加和删除使< div>红色使用：

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

和：

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

红类是：

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