我如何在jQuery中附加div並刪除除第一個div以外的div

Question

我想在單擊時添加div，然后添加更多內容，然后根據我的代碼刪除該div

$(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();
    });
});

這是我的代碼，它工作完美，但我不想刪除第一個div並刪除刪除按鈕，我的html代碼是

<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>

我該怎么辦建議我

Answer 1

試試這個。

$(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();
     }
  }
});

Answer 2

另一種解決方案

在這里檢查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();

    });
});