Option Select JQuery Event from Add Input

Question

I am trying to write a script that will allow me to add fields to a form from an option selected: Here is the HTML:

<div id="rules"><!--javascript handled by addRule.js in /js/ --> 
    <div id="add-rule">
         <p></p><!--left empty for script to fill-->
         <a href="#" class="add-rule" id="add">+Inclusion Rule</a>
</div>

Then my Javascript will actually add new fields when you hit +Inclusion Rule :

$(function() {
    var scntDiv = $('#rules');
    var i = $('#rules p').size();

    $('#add').live('click', function() {
            var inputRule = '<p>User:<br><select name="user_rule_'+i+'">'+
             '<option value="registered">Registered</option>'+
             '<option value="purchased">Purchased</option>'+
             '<option value="created">Created</option></select> '+
             '<select id="time_select_'+i+'" class="time-select-'+i+'" name="time_select_'+i+'">'+
             '<option value="yes">all (included)</option>'+
             '<option value="yes">all (not included)</option>'+
             '<option value="BEFORE">before</option>'+
             '<option value="AFTER">after</option>'+
             '<option value="BETWEEN">between</option></select> '+
             '<input type="date" name="begin_date_'+i+'" id="begin_date_'+i+'" class="campaign-input"><br>'+
             '<input type="date" name="end_date_'+i+'"  id="end_date_'+i+'" class="campaign-input"><br>'+
             '<a href="#" class="delete-rule">Remove</a>';
            $(inputRule).appendTo(scntDiv);
            $('#begin_date_'+i).hide();
            $('#end_date_'+i).hide();
            $('#time_select_'+i).change(function(){
                if($(this).val() == 'BEFORE' || $(this).val() =='AFTER'){
                    $('#begin_date_'+i).show();
                    console.log($('#begin_date_'+i).show());
                }
            });
            i++;
            return false;
    });
    $('.delete-rule').live('click', function() { 
        if( i > 1 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
    });

});

EDITED I decided to make it easer and just hide the inputs and display them like simple animation. The only problem is now, the i is off count by 1. When its suppose to be getting rid of begin_date_1 it looks for begin_date_2 (which obviously isn't there).

Answer 1

发生问题是因为，当您替换“删除”按钮时，您并未将其放在P标记内，这意味着$(this).parents('p')将不返回任何内容，也不会删除任何内容。