简体   繁体   中英

How i append div in jquery and delete div except first div

I want to append div on click add more and remove that div according to my code

$(document).ready(function() {
    $(".add-skill-row span").click(function() {
        $(".add-skils-form:first").clone().appendTo("#appendbox");
    });
    $('#appendbox').on('click', '.delete-row', function() {
        $(this).closest('.add-skils-form').remove();
    });
});

this is my code it works perfect but i want to not delete first div and remove delete button my html code is

<div id="appendbox">
    <div class="add-skils-form">
        <div class="skill-a">
            <input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
        </div>
        <div class="skill-b">
            <select id="key-skills-select" class="defualt-select default-size">
                <option value="3">Advanced</option>
                <option value="2">Intermediate</option>
                <option value="1" selected>Beginner</option>

            </select>
            <a href="#" class="delete-row"><i class="fa fa-trash" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

how could i do please suggest me

Try with this.

$(document).ready(function() {
    deleteRow();
    $(".add-skill-row span").click(function() {
        $(".add-skils-form:first").clone().appendTo("#appendbox");
        $('.delete-row').show();
    });
    $('#appendbox').on('click', '.delete-row', function() {
        $(this).closest('.add-skils-form').remove();
        deleteRow();
    });

    function deleteRow(){
        if($('.add-skils-form').length == 1){
        $('.delete-row').first().hide();
     }
  }
});

Another Solution

Check here https://fiddle.jshell.net/o2f0kskf/1/

$(document).ready(function() {
    $(".add-skill-row span").click(function() {
        $(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
    });
    $('#appendbox').on('click', '.delete-row', function() {
         $(this).closest(".add-skils-form").not(":first-child").remove();

    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM