Question

I need to use jquery to add and delete input fields based on user’s choice from a drop-down menu. I am able to achieve the add input fields feature. But got confused on the remove part. Can anyone give me some suggestions?
Here is the demo
HTML code:

<div class="form-fields">

<table>
<tr><th><label for="id_NOA">Number of Applications:</label></th><td><select name="NOA" id="id_NOA">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

</select></td></tr>

<tr><th><label for="id_Ap_m">Application method 1:</label></th><td><select name="Ap_m" id="id_Ap_m">
<option value="" selected="selected">Select an application method</option>
<option value="1">Aerial</option>
<option value="2">Ground Sprayer</option>
</select></td></tr>

<tr><th><label for="id_Ar">Application rate:</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>

</table>

</div>

​jquery code:

$(document).ready(function() {
    i = 2;
    $("label[for='id_Ar']").html('Application rate 1:');   
    $('#id_NOA').change(function() {   
        var count_c = $(this).val();   
        while (i <= count_c) {
            if (i <= count_c) {    
                $('<tr><th><label for="id_Ap_m">Application method ' + i + ':</label></th><td><select name="Ap_m" id="id_Ap_m"><option value="" selected="selected">Select an application method</option><option value="1">Aerial</option><option value="2">Ground Sprayer</option></select></td></tr>').appendTo("table");    
                $('<tr><th><label for="id_Ar">Application rate ' + i + ':</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>').appendTo("table");
                i++;
            }

//this is the part I could not make it work
            if (i>count_c){

                $('.form-fields:last').remove();
                i--;

            }
        }
    });



});​

Answer 1

You want something like this http://jsfiddle.net/slash197/a98U8/5/ ?

$(document).ready(function() {

    $('#id_NOA').change(function(){
        
        var total = $(this).val();
        
        //remove all
        $('.app_method').each(function(index){
            if (index != 0) $(this).remove();
        });
        $('.app_rate').each(function(index){
            if (index != 0) $(this).remove();
        });
        
        //create new ones
        for (var i = 2; i <= total; i++)
        {
            $('.app_method:first').clone().appendTo('table');
            $('.app_rate:first').clone().appendTo('table');
        }
        
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-fields">
    <table>
        <tr>
            <th><label for="id_NOA">Number of Applications:</label></th>
            <td>
                <select name="NOA" id="id_NOA">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
        </tr>
        <tr class="app_method">
            <th><label>Application method 1:</label></th>
            <td>
                <select name="Ap_m">
                    <option value="" selected="selected">Select an application method</option>
                    <option value="1">Aerial</option>
                    <option value="2">Ground Sprayer</option>
                </select>
            </td>
        </tr>
        <tr class="app_rate">
            <th><label>Application rate:</label></th>
            <td><input type="text" name="Ar" value="1" /></td>
        </tr>
    </table>
</div>