Wie verschiebt man ein Div-Panel unter allen anderen Div-Panels bei einem Button-Klick mit JQuery/CSS?

Question

Es gibt mehrere Panels 1 unter einem anderen.

Es gibt eine Schaltfläche, um das Panel zu entfernen. Wenn der Benutzer auf die Schaltfläche klickt; Das Panel sollte unter allen anderen Panels liegen.

Zum Beispiel: Es sind 10 Panels untereinander ausgerichtet. Endbenutzer möchte Panel 2 entfernen, indem er auf die Schaltfläche klickt. Es sollte unter alle 8 Panel gehen und wird zum 10. Panel. (Keine Notwendigkeit, seine IDs oder Werte zu ändern, nur Bewegung ohne Animation)

Konnte jemand vorschlagen, wie man das tut, entweder mit CSS oder JQuery?

Es folgt Szenario für Ihre Referenz:

Fiddle: https://jsfiddle.net/k5491Lg3/

<div id="accountInfo" class="accountInfo"> 
    <div id="accountTrue"> 
     <div class="accout newAccountPanel wrapper"> 
       <h3 class="boldText"> 
        Play with Person 1 
       </h3> 
       <div class="fieldset OneAccordion person"> 
         I AM SWEET PANEL 1 
        <!-- End panel --> 
        <input type="button" id="toBeRemoved1" value="Remove it Later" /> 
       </div> 
       <!-- End fieldset --> 
     </div> 

     <div class="accout newAccountPanel wrapper"> 
       <h3 class="boldText"> 
        Play with Person 2 
       </h3> 
       <div class="fieldset OneAccordion person"> 
         I AM SWEET PANEL 2 
        <!-- End panel --> 
        <input type="button" id="toBeRemoved2" value="Remove it Later" /> 
       </div> 
       <!-- End fieldset --> 
     </div> 

     <div class="accout newAccountPanel wrapper"> 
        <h3 class="boldText"> 
         Play with Person 3 
        </h3> 
      <div class="fieldset OneAccordion person"> 
        I AM SWEET PANEL 3 
       <!-- End panel --> 
       <input type="button" id="toBeRemoved3" value="Remove it Later" /> 
      </div> 
      <!-- End fieldset --> 
     </div> 
    </div> 
</div> 

Answer 1

Try this,

HTML,

<div id="accountInfo" class="accountInfo"> 
    <div id="accountTrue"> 
     <div class="accout newAccountPanel wrapper"> 
       <h3 class="boldText"> 
        Play with Person 1 
       </h3> 
       <div class="fieldset OneAccordion person"> 
         I AM SWEET PANEL 1 
        <!-- End panel --> 
        <input type="button" value="Remove it Later" class="btn-remove" /> 
       </div> 
       <!-- End fieldset --> 
     </div> 

     <div class="accout newAccountPanel wrapper"> 
       <h3 class="boldText"> 
        Play with Person 2 
       </h3> 
       <div class="fieldset OneAccordion person"> 
         I AM SWEET PANEL 2 
        <!-- End panel --> 
        <input type="button" value="Remove it Later" class="btn-remove" /> 
       </div> 
       <!-- End fieldset --> 
     </div> 

     <div class="accout newAccountPanel wrapper"> 
        <h3 class="boldText"> 
         Play with Person 3 
        </h3> 
      <div class="fieldset OneAccordion person"> 
        I AM SWEET PANEL 3 
       <!-- End panel --> 
       <input type="button" value="Remove it Later" class="btn-remove" /> 
      </div> 
      <!-- End fieldset --> 
     </div> 
    </div> 
</div> 

JS,

$("#accountTrue").on("click", ".btn-remove", function(){ 
    var thisElement = $(this).closest('.accout'); 
    $(thisElement).appendTo("#accountTrue"); 
}); 

Siehe Beispiel: https://jsfiddle.net/k5491Lg3/3/