How to move a div panel below all other div panels on a button click using JQuery/CSS?

Question

There are multiple panels 1 below another.

There is button to remove the panel. When user clicks button; the panel should go below all other panels.

For example: There are 10 Panels align below each other. End user want to remove Panel 2 by clicking button. It should go below all 8 panel and becomes 10th Panel. (No need to change its ID's or values, just movement without animation)

Could anyone suggest how to do that using either CSS or JQuery?

Following is scenario for your reference:

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>

I believe your answer can be found here: [http://stackoverflow.com/questions/17420281/jquery-insertafter-last-item](http://stackoverflow.com/questions/17420281/jquery-insertafter-last-item) — Destination Designs, Jul 25 '16 at 10:44

Jerad Rutnam · Answer 1 · 2016-07-25T13:36:48.647

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");
});

See the example: https://jsfiddle.net/k5491Lg3/3/

How to move a div panel below all other div panels on a button click using JQuery/CSS?

1 Answers1