Jquery replacewith() divs are being added instead of replaced

Question

I have three divs, one shows normal text, the other shows the text inside a wysiwyg editor, and another one shows a list of texts.

The normal text is displayed when visiting the page and there are two buttons which replace the normal text with either the editor or the list.

My issue is that when I click on a button, and then on another one both divs are visible. They don't replace eachother but are added alongside eachother.

Why is that and what can I do about it?

My Code:

 $("body").on("click", ".editcontenticon", function() { console.log('edit'); var $form = $("#editcontentform"); var $content = $form.find( "input[name='content']" ).val(); tinymce.init({ selector: '#editcontentarea', language: 'nl', height: '400', plugins: "lists advlist textcolor colorpicker link", toolbar: 'link insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons' }); tinymce.activeEditor.setContent($content); $('.editwindow').replaceWith($('.editwindowadmin').show()); }); $("body").on("click", ".versionicon", function() { console.log('versions'); $('.editwindow').replaceWith($('.versions').show()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="versions"> <h4>Versiebeheer</h4> <ul class="versionlist"> <li><b>Organisatie 123</b> - 2018-08-28 15:07:07 <i class="mdi mdi-delete-forever"></i></li> <li><b>Organisatie 123</b> - 2018-08-28 15:00:53 <i class="mdi mdi-delete-forever"></i></li> </ul> </div> <div class="editcontent"> <i title="Versiebeheer" class="versionicon mdi mdi-note-text"></i> <i title="Edit" id="1" class="editcontenticon mdi mdi-tooltip-edit"></i> </div> <div class="editwindowadmin"> <form class="wysiwyg" id="editcontentform" method="post"> <input type="text" name="title" class="form-control margininput" value="Organisatie 123"> <input type="hidden" name="parent_id" value="73"> <input type="hidden" name="id" value="1"> <input type="hidden" name="content" value="<p>Test test test 123</p>"> <textarea id="editcontentarea"><p>Test test test 123</p></textarea> <input type="checkbox" id="versioncheck" class="mtop-20" name="version"> Opslaan als nieuwe versie (huidige versie wordt overschreven wanneer niet aangevinkt)<br> <button type="button" id="savecontent" class="font-15 btn btn-secondary mtop-20 btn-lg waves-effect btnadd fullwidth">Opslaan</button> </form> </div> <div class="editwindow"> <h4 class="mt-0 mb-30 header-title bigheader">Organisatie 123</h4> <p> <p>Test test test 123</p> </p> <p>Versiedatum: 2018-08-28 15:00:53 <i class="mdi mdi-note-text"></i></p> </div> 

Answer 1

You might try something like this rather than replaceWith()

 var $editwindowhidden = $(".editwindowhidden"); var $editwindow = $(".editwindow"); var $versions = $(".versions"); var $admin = $(".admin"); $("body").on("click", ".editcontenticon", function() { $editwindowhidden.append($editwindow.children()[0]); $editwindow.append($versions); }); $("body").on("click", ".versionicon", function() { $editwindowhidden.append($editwindow.children()[0]); $editwindow.append($admin); }); 

 .group:after { content: ""; display: table; clear: both; } li { border:solid 1px; background-color: green; padding: 0.5em; margin: 0.5em; float: left; display: inline-block; } 

 <div class="editcontent"> <ul class="group"> <li class="versionicon" style="">Versiebeheer</li> <li class="editcontenticon" style="">Edit</li> </ul> </div> <div class="editwindow" style="border:solid 1px; padding: 1em;"> <div class="defaulttext"> <h4>Edit Window</h4> <p>Test test test 123</p> </div> </div> <div class="editwindowhidden" style="border:solid 1px; padding: 1em; background-color: #999;"> <h2>To be hiddent off screen....</h2> <div class="versions" style=""> <h4>Versions Div</h4> <p>Some version info</p> </div> <div class="admin" style=""> <h4>Admin Div</h4> <p>Some admin info</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>