更改/删除div ID和刷新页面async

Question

我想知道如何删除按钮单击上的div id并将其添加到另一个按钮上，以便关联CSS加载。页面应该异步刷新以显示更改。 到目前为止，我已经能够通过点击按钮来删除id。

$("#Remove").on('click', function() { 
 
    $("#slides").removeAttr("id"); 
 
}); 
 
$('#Add').on('click', function() { 
 
    $("#main-wrapper > div").attr("id", "slides"); 
 
}); 
 

 
var pathname = window.location.host; 
 

 
$("#Remove").click(function() { 
 
    $("#main-wrapper").load(pathname); 
 
}); 
 
//add code to refresh main-wrapper on any button click

#slides h1 { 
 
    color: black; 
 
    background: grey; 
 
    float: none; 
 
} 
 
h1 { 
 
    background: green; 
 
    color: white; 
 
    width: 20vw; 
 
    float: left; 
 
    padding: 10px; 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="Remove">Remove id</button> 
 
<button id="Add">Add id</button> 
 
<div id="main-wrapper"> 
 
    <div id="slides"> 
 
    <div class="slides-container"> 
 
     <h1>This is a sample text</h1> 
 
     <h1>You are awesome</h1> 
 
     <h1>This is another line</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

$(document).ready(function(){ 
    $("#Remove").on('click', function(){ 
    $("#slides").removeAttr("id"); 
    }); 
    $('#Add').on('click', function(){ 
    $("#main-wrapper > div").attr("id", "slides"); 
    }); 
});