Append div 点击后行

Question

I have a form and a row of rectangles (divs) that contain variables. Once a rectangle is clicked the variable goes into the first form slot. This works at the moment, however, I am trying to have the variable in the form go back to the row of rectangles after being clicked again. My appendChild doesn't seem to be working and I would appreciate any help.

html

<div id="ranking_card">
    <div class="d-flex justify-content-center center ranking_line">
        <h4 class="numbers" id="one">1.</h4>
        <div class="card">
            <div class="card-body ranking_slot" id="ranking1"></div>
        </div>
    </div>
</div>

<div class="travel_variables">
    <div class="d-flex justify-content-center center variable_row desktop" id="js_row">
        <div class="card variable climate" id="hot" onclick="click_variable(this.id)">
            <div class="card-body no_padding">
                Hot Climate
            </div>
        </div>

        <div class="card variable affordability" id="expensive" onclick="click_variable(this.id)">
            <div class="card-body no_padding">
                Expensive Trip
            </div>
        </div>
    </div>
</div>

js

function click_variable(clicked_id) {

    if (document.getElementById(clicked_id).parentElement.id.includes("ranking")) {
        console.log(document.getElementById(clicked_id));
        row = document.getElementById("js_row");
        row.appendChild(document.getElementById(clicked_id));
    }

    if (document.getElementById("ranking1").firstChild == null) {
        document.getElementById("ranking1").appendChild(document.getElementById(clicked_id));

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            document.getElementById("ranking1").firstChild.style.height = '40px';
            document.getElementById("ranking1").firstChild.style.margin = '0px 0px 0px 0px';
            document.getElementById("ranking1").firstChild.style.marginTop = '-12px';
        }

        document.getElementById("ranking1").firstChild.style.margin = '0px 0px 0px 0px';
        document.getElementById("ranking1").firstChild.style.marginTop = '-12px';
        getValue();
    }
}

Answer 1

In the solution below, I made a toggle check to add and remove child <div> s from the parent <div> :

 let row = document.getElementById("js_row"); let ranking1 = document.getElementById("ranking1"); let toggleState = [false, false]; function getValue(){ } function add(element){ if (element.parentElement.id.includes("ranking")) row.appendChild(element); } function remove(element){ ranking1.appendChild(element); ranking1.firstChild.style.margin = '0px 0px 0px 0px'; ranking1.firstChild.style.marginTop = '-12px'; getValue(); } function click_variable(clicked_id) { let clicked_element = document.getElementById(clicked_id); if(clicked_id === "hot"){ if(toggleState[0]) add(clicked_element); else remove(clicked_element); toggleState[0] =;toggleState[0]; } else if(clicked_id === "expensive"){ if(toggleState[1]) add(clicked_element); else remove(clicked_element); toggleState[1] = !toggleState[1]; } }

 #ranking_card{ width: 100vw; border: 1px solid red; margin-bottom: 50px; }.travel_variables{ border: 1px solid blue; height: 150px; margin-top: 25px; } #js_row{ margin-top: 50px; }.card{ margin-top: 50px; }

 <div id="ranking_card"> <div class="d-flex justify-content-center center ranking_line"> <h4 class="numbers" id="one">1.</h4> <div class="card"> <div class="card-body ranking_slot" id="ranking1"></div> </div> </div> </div> <div class="travel_variables"> <div class="d-flex justify-content-center center variable_row desktop" id="js_row"> <div class="card variable climate" id="hot" onclick="click_variable(this.id)"> <div class="card-body no_padding"> Hot Climate </div> </div> <div class="card variable affordability" id="expensive" onclick="click_variable(this.id)"> <div class="card-body no_padding"> Expensive Trip </div> </div> </div> </div>