Remove prepend section when there is only one group jQuery

Question

On click event, I'm cloning the section which is working fine. I also prepend the remove button when there is new section added.

I have only one issue, i want to remove the prepended button when there is only one section remain.

This is the code

 $(document).ready(function() { $('#taskForm') // Add button click handler .on('click', '.addButton', function() { var $template = $('#taskTemplate'), $clone = $template .clone(true, true) .removeClass('hide') .removeAttr('id') .insertBefore($template); $('.dateofbirth').prepend($('<div style="height:0;"><a class="delete removeButton" href="#"><i class="fa fa-times"></i></a></div>')); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).closest('.form--group'); $row.remove(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="name-field row" id="taskForm"> <div class="form--group"> <div class="col-xs-12 col-sm-6 childname"> <div class="field text-left"> <label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text"> </div> </div> <div class="col-xs-12 col-sm-6 dateofbirth"> <div class="field text-left"> <label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text"> </div> </div> <div class="form--group hide" id="taskTemplate"> <div class="col-xs-12 col-sm-6 childname"> <div class="field text-left"> <label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text"> </div> </div> <div class="col-xs-12 col-sm-6 dateofbirth"> <div class="field text-left"> <label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text"> </div> </div> </div> <div class="col-lg-12 col-sm-12 col-xs-12"> <a class="btn-success addButton" href="#" id="addChild" name="addchild">Add Child</a> </div> </div> </div> 

Can anyone help me with this how can i achieve this?

Thanks in advance.

Answer 1

Make the following changes:

• The template should not be a child of the first form--group, it should be a sibling . If not, your dynamically added rows are regarded children of the first row. So move the template out of it, as well as the Add button.
• Do not add the HTML for the removal button via code. Instead add the HTML for that button in your static HTML, both in the first row and the template

• Every time you add or remove a row, and also at page load, perform the following action:

    $(".removeButton").toggle($(".removeButton").length > 2) 

This will count the number of delete buttons (including the one that is in the template). If that counts to just two, then hide those buttons, otherwise show them.

Here is a little snippet:

 $(document).ready(function() { $('#taskForm') // Add button click handler .on('click', '.addButton', function() { var $template = $('#taskTemplate'), $clone = $template .clone(true,true) .removeClass('hide') .removeAttr('id') .insertBefore($template); $(".removeButton").toggle($(".removeButton").length > 2); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).closest('.form--group'); $row.remove(); $(".removeButton").toggle($(".removeButton").length > 2); }); $(".removeButton").toggle($(".removeButton").length > 2); }); 

 .hide { display: none } .field { margin-left: 20px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="name-field row" id="taskForm"> <div class="form--group"> <div class="col-xs-12 col-sm-6 childname"> <div class="field text-left"> <label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text"> </div> </div> <div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div> <div class="col-xs-12 col-sm-6 dateofbirth"> <div class="field text-left"> <label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text"> </div> </div> </div> <div class="form--group hide" id="taskTemplate"> <div class="col-xs-12 col-sm-6 childname"> <div class="field text-left"> <label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text"> </div> </div> <div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div> <div class="col-xs-12 col-sm-6 dateofbirth"> <div class="field text-left"> <label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text"> </div> </div> </div> <div class="col-lg-12 col-sm-12 col-xs-12"> <a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a> </div> </div>