If you want to add and remove attribute using jquery then you can check this code. It will remove id and then when click remove then this id will remove. I also add css for understanding it.

This is html and css code


<div id="page_navigation1" style="border: 2px solid #ccc;height: 70px;width: 300px">Main Content</div>
<button id="add">Add</button>
<button id="remove">Remove</button>

This is css code

<style>
    #page_navigation1 {
        color: red;
    }
</style>

This is jQuery code which add and remove attribute

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<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>

When run this code you will see this effect, If you find any problem then please inform me.