I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successfully removed the id using a button click.
$("#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>