另一种解决方案

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

    });
});

我如何在jquery中追加div并删除除第一个div之外的div

2 个答案:

另一种解决方案