完全删除/删除div并显示另一个（切换）

Question

I'm trying to make a div completely delete itself not just set the style to none for example, I am wondering if it's possible to completely remove and show another, but toggle so that it can be retrieved still. Is this possible using html. Would loading it off another file be the only solution?

At the moment I'm redirecting the user depending on their select to a new page but I'm wanting it all on the same page ideally but that it updates completely.

function showDiv(elem) {
   if (elem.value == 19) {
     // show div 1
     // delete div 2 completely
   } else if(elem.value == 20) {
     // show div 2
     // delete div 1 completely
   }
}

Answer 1

If you want to do this on client side, you can use template approach:

 function showDiv(elem) { var value = elem.value; var templateId = 'template' + value; var containerId = 'main-container'; var template = document.getElementById(templateId); var container = document.getElementById(containerId); if (template && container) { container.innerHTML = template.textContent; } } showDiv({value: 19}); 

 <select onchange="showDiv(this)"> <option>19</option> <option>20</option> </select> <div id="main-container"></div> <script type="text/template" id="template19"> <div>Content 19</div> </script> <script type="text/template" id="template20"> <div>Content 20</div> </script>