动态删除没有唯一属性的输入字段

来自

$('#pq_entry_' + num).remove(); // remove the last element

更改为

var toDelete = $('#pq_entry_' + num).not('[data-saved]');
if (toDelete.length) {
    // Last one wasn't a db-entry
    toDelete.remove();
    // enable the "add" button
    $('#btnAdd').prop('disabled', '');
    // if only one element remains, disable the "remove" button
    if ($('.clonedSection:not([data-saved])').length == 0) 
        $('#btnDel').prop('disabled', 'disabled');
}

工作示例：http://jsfiddle.net/az9LQ/

您可以将其简化很多：

• 添加一个<script type="text/template">元素，它可以容纳每次要附加的HTML（它在页面上不可见）。我已经用$1替换了您正在动态更新的行号，并且$1的所有出现都可以在一次快照中替换（如果您想替换其他值，那么您可以扩展它，并使用$2、add button0…$n进行多次替换）
• 在"click"处理程序之外设置各种静态变量，包括addedRows数组，以便在添加行时存储这些行
• 在"add"处理程序中：
  • 从模板中创建行，将$1替换为行号
  • 将该行存储在addedRows数组中，以便以后在"delete"处理程序中使用
  • 根据需要动态更新元素；以及
  • 更新按钮
• 在"delete"处理程序中：
  • addedRows数组存储对动态添加的行的所有引用，因此只有pop()是该数组的最后一行，remove()是它
  • 更新按钮

JSFIDDLE

HTML:

<table>
    <tbody id="input_table" >
    <tr id="pq_entry_1" class="clonedSection" data-saved="1">
        <td><input type="text" name="person_id" value='1' readonly /></td>
        <td>
        <input id="person_id_1" name="person_id_1" type="text" value='1'/>
        <input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
        </td>
        <td>
        <select id="person_status_1" name="person_status_1"></select>
        </td>
    </tr>
    <tr id="pq_entry_2" class="clonedSection" data-saved="2">
        <td><input type="text" name="person_id" value='2' readonly /></td>
        <td>
        <input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
        </td>
        <td>
        <select id="person_status_2" name="person_status_2"></select>
        </td>
    </tr>
</tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>
<script type="text/template" id="template">
    <tr id="pq_entry_$1" class="clonedSection">
        <td><input type="text" name="person_id" value="$1" readonly /></td>
        <td>
            <input id="person_id_$1" name="person_id_$1" type="text"/>
            <input id="person_fname_$1" name="person_fname" placeholder="Person #$1 First Name" type="text" />
        </td>
        <td>
            <select id="person_status_$1" name="person_status_$1"></select>
        </td>
    </tr>
</script>

JavaScript:

$(document).ready(function () {
    var template       = $('#template' ).html(),
        $input_table   = $( '#input_table' ),
        addedRows      = [],
        num_saved_rows = $('#input_table tr').length;

    $('#btnAdd').click(function () {
        var row = $( template.replace( /'$1/g, num_saved_rows + addedRows.length + 1 ) )
                    .appendTo( $input_table );
        addedRows.push( row );
        $('#btnDel').prop('disabled', num_saved_rows + addedRows.length == 100 );
        // Not sure what you are doing with the 'select' element but you can
        // dynamically update the attributes of any element like this:
        $( 'select', row ).val( '' );
    });
    $('#btnDel').click(function () {
        if ( addedRows.length )
        {
            addedRows.pop().remove();
            $('#btnAdd').prop('disabled', false);
            $('#btnDel').prop('disabled', !addedRows.length);
        }
    });
    $('#btnDel').prop('disabled', 'disabled');
});

不确定要对select元素执行什么操作，因为它没有OPTION子元素。