除了第一个div之外，我是如何在jquery中添加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();

    });
});