user5876330 user5876330 - 6 months ago 15
jQuery Question

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

Prs Prs
Answer

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