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

我有一个动态表单，允许在jquery的帮助下动态添加和删除字段。 现有字段是从mysql表中的值自动填充的。 add button添加新输入字段，而delete button删除输入字段。 从db中加载值的字段标记有data-saved属性。 现在我的困境集中在delete button 。 如何删除未使用data-saved属性标记的新部分？ 例

JQUERY

 $(document).ready(function () { $('#btnAdd').click(function () { var $clones = $('#input_table tr'), num = $clones.size() + 1, next_num = parseInt($clones.last().find('input[name^="person_id"]').val()) + 1, $template = $clones.first(), newSection = $template.clone().attr('id', 'pq_entry_'+num), person_id = 'person_id_'+num; person_fname = 'person_fname_'+num; person_status = 'person_status_'+num; newSection.removeAttr('data-saved'); // clear out all sections of new input newSection.find('input').val(''); newSection.find('select').val([]); newSection.find('input[name^="person_id"]').attr({ 'id': person_id, 'name': person_id }).val(); newSection.find('input[name^="person_fname"]').attr({ 'id': person_fname, 'name': person_fname, 'placeholder' : 'Person #'+num+' First Name' }).val(); newSection.find('select').attr({ 'id': person_status, 'name': person_status }).val(next_num); newSection.find('input[type="button"]').attr('data-ident', next_num); $('#input_table').append(newSection); $('#btnDel').prop('disabled', ''); if (num == 100) $('#btnAdd').prop('disabled', 'disabled'); }); $('#btnDel').click(function () { var num = $('.clonedSection').length; // how many duplicate input fields we currently have $('#pq_entry_' + num).remove(); // remove the last element // enable the "add" button $('#btnAdd').prop('disabled', ''); // if only one element remains, disable the "remove" button if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled'); }); $('#btnDel').prop('disabled', 'disabled'); }); 

HTML

Answer 1

从

 $('#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/

Answer 2

你可以简化它：

• 添加一个元素，每次都可以保存要添加的HTML（它在页面上不可见）。 我已经用$1替换$1你动态更新的行号，并且所有出现的$1都可以在一次性中被替换（如果你想替换其他值，那么你可以扩展它并使用$2 ， $3 ，... $n用于多次替换）。
• 在“click”处理程序之外设置各种静态变量，包括addedRows数组，用于在添加行时存储行。
• 在'添加'处理程序中：
  • 从模板创建行，用行号替换$1 ;
  • 将行存储在addedRows数组中，以便稍后在“delete”处理程序中使用;
  • 根据需要动态更新元素; 和
  • 更新按钮。
• 在'删除'处理程序中：
  • addedRows数组存储对动态添加的行的所有引用，所以只需pop()数组的最后一行并remove()它;
  • 更新按钮。

的jsfiddle

HTML：

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子元素。