I'm using form, where i have remove function. It is working fine but i want the fields value to be clear when remove function triggered. Because i'm also sending input values to my php script. This is html

<div class="form-group">
<div class="col-xs-12 col-sm-6 childname">
  <div class="field text-left">
      <label class="text-left">Child name</label>
      <input class="thevoornaam character" name="voorname[]" type="text" placeholder="Voornaam"/>
  </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 type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
      <!-- <input type="text" size="50" id="URL" onchange="getDoB(this.value)"/> -->
  </div>
</div>
</div>
<a class="delete removeButton" href="#" onmouseup="showHint('close','stepname');"><i class="fa fa-times"></i></a>

Here is my js code

(document).ready(function() {

$('#taskForm')
    .bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            'task[]': {
                // The task is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The task is required'
                    }
                }
            },
            'date[]': {
                // The due date is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    date: {
                        format: 'DD/MM/YYYY'
                        // message: 'Fill valid date of birth'
                    }
                }
            }
        }
    })
    .on('added.field.fv', function(e, data) {
        if (data.field === 'date[]') {
            // The new due date field is just added
            // Create a new date picker
            data.element
                .parent()
                // .datepicker({
                //     format: 'dd/mm/yyyy'
                // })
                .on('changeDate', function(evt) {
                    // Revalidate the date field
                    $('#taskForm').bootstrapValidator('revalidateField', data.element);
                });
        }
    })

    // Add button click handler
    .on('click', '.addButton', function() {
        var $template = $('#taskTemplate'),
            $clone    = $template
                            .clone(true,true)
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template);
        $("#stepname").addClass("disabled")
        // Add new fields
        // Note that we DO NOT need to pass the set of validators
        // because the new field has the same name with the original one
        // which its validators are already set
        $('#taskForm')
            .bootstrapValidator('addField', $clone.find('[name="task[]"]'))
            .bootstrapValidator('addField', $clone.find('[name="date[]"]'))
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row = $(this).closest('.form-group');

        // Remove fields
        $('#taskForm')
            .bootstrapValidator('removeField', $row.find('[name="task[]"]').val(''))
            .bootstrapValidator('removeField', $row.find('[name="date[]"]').val(''));

        // Remove element containing the fields
        $row.remove();
    });

});

Here i'm trying to clear the values but it is not working. Can anyone help here what i'm doing miskate?

Thanks is advance

I'm using form, where i have remove function. It is working fine but i want the fields value to be clear when remove function triggered. Because i'm also sending input values to my php script. This is html

<div class="form-group">
<div class="col-xs-12 col-sm-6 childname">
  <div class="field text-left">
      <label class="text-left">Child name</label>
      <input class="thevoornaam character" name="voorname[]" type="text" placeholder="Voornaam"/>
  </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 type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
      <!-- <input type="text" size="50" id="URL" onchange="getDoB(this.value)"/> -->
  </div>
</div>
</div>
<a class="delete removeButton" href="#" onmouseup="showHint('close','stepname');"><i class="fa fa-times"></i></a>

Here is my js code

(document).ready(function() {

$('#taskForm')
    .bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            'task[]': {
                // The task is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The task is required'
                    }
                }
            },
            'date[]': {
                // The due date is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    date: {
                        format: 'DD/MM/YYYY'
                        // message: 'Fill valid date of birth'
                    }
                }
            }
        }
    })
    .on('added.field.fv', function(e, data) {
        if (data.field === 'date[]') {
            // The new due date field is just added
            // Create a new date picker
            data.element
                .parent()
                // .datepicker({
                //     format: 'dd/mm/yyyy'
                // })
                .on('changeDate', function(evt) {
                    // Revalidate the date field
                    $('#taskForm').bootstrapValidator('revalidateField', data.element);
                });
        }
    })

    // Add button click handler
    .on('click', '.addButton', function() {
        var $template = $('#taskTemplate'),
            $clone    = $template
                            .clone(true,true)
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template);
        $("#stepname").addClass("disabled")
        // Add new fields
        // Note that we DO NOT need to pass the set of validators
        // because the new field has the same name with the original one
        // which its validators are already set
        $('#taskForm')
            .bootstrapValidator('addField', $clone.find('[name="task[]"]'))
            .bootstrapValidator('addField', $clone.find('[name="date[]"]'))
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row = $(this).closest('.form-group');

        // Remove fields
        $('#taskForm')
            .bootstrapValidator('removeField', $row.find('[name="task[]"]').val(''))
            .bootstrapValidator('removeField', $row.find('[name="date[]"]').val(''));

        // Remove element containing the fields
        $row.remove();
    });

});

Here i'm trying to clear the values but it is not working. Can anyone help here what i'm doing miskate?

Thanks is advance

• javascript
• jquery
• html

• Can you share the full JS code? – fortunee Commented Apr 17, 2018 at 12:21
• Is $row.remove(); triggered on click? – fortunee Commented Apr 17, 2018 at 12:22
• I have updated my code, you can see full js code now. – Zain Commented Apr 17, 2018 at 12:24

2 Answers 2

If all you needed to do is a field clear... I'm iterating around each one with .each and setting its value to an empty string