Question

I have created add text field with appendTo().

.remove() functions also working fine.

Here is my code:

<div id="add_words">
    <a id="add">Add</a>
    <a href="#" class="reset">Reset</a>

    <div class="line">Word <input class="input1" type="text" /></div>
</div>
$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;
    // Add new input field while keyup
    $("#add_words").on("keyup", "input[type='text']", function(e) {
        if ($(this).attr("data-isused") != "true") {
            $(this).attr("data-isused", "true");
            wordscount++;
            $('<div id="em_in" class="line" style="display:none">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /><a class="remScnt">Remove</a></div>').appendTo(scntDiv).slideDown(1000);
            i++
            return false;
        }
    });
    // Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

These are working fine.

I would like to add reset function for <a href="#" class="reset">Reset</a> link
I have tried with parent and some other ways like this:

$('a.reset').click(function() {
    while (i > 2) { 
        $('.line').remove(); 
        i--;
    }
});

Unfortunately I didn’t find solution yet.

Answer 1

How about this:

$('a.reset').click(function() {
    $('.line').slice(1).remove(); // select all lines but first one for removal... then remove them
});