使用按钮删除输入表单失败
在这种forms中，有一个添加按钮来添加输入（2个输入）。 但删除按钮无法正常工作..
我想要的是，每个新的输入（2个输入）与添加按钮一起添加，以便能够删除它们（2再次）以及删除按钮。
现在删除按钮不会删除添加的2个输入。
这是bootply
var counter6=0; $('#formType1') .on('click', '.addButton6', function() { counter6++; var $template = $('#dose1'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-dose1-index', counter6) .insertBefore($template); // Update the name attributes $clone .find('[name="strofes"]').attr('name', 'strofes-' + counter6).end(); var $template = $('#dose2'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-dose2-index', counter6) .insertBefore($template); $clone .find('[name="uesi"]').attr('name', 'uesi-' + counter6).end(); }) // Remove button click handler .on('click', '.removeButton6', function() { counter6 = counter6-1; var $row = $(this).parents('.form-group'), index = $row.attr('data-dose1-index'); // Remove element containing the fields $row.remove(); });
通过对代码进行一些更改，我得到了这个function。 变化是
添加此行
$clone.find('.removeButton6').data('to-remove', counter6);
对你的克隆$('#dose1')和$('#dose2')要在删除按钮上有一个指针，说明稍后点击它时要删除哪个div。
并更改您的删除function，如下所示。
// Remove button click handler .on('click', '.removeButton6', function() { counter6 = counter6 - 1; var indexToRemove = $(this).data('to-remove'); // get the value set in the above code. $('[data-dose1-index="' + indexToRemove + '"]').remove(); //remove dose1 of that value $('[data-dose2-index="' + indexToRemove + '"]').remove(); // remove dose2 of that value });
以下是工作片段。
var counter6 = 0; $('#formType1') .on('click', '.addButton6', function() { counter6++; var $template = $('#dose1'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-dose1-index', counter6) .insertBefore($template); // Update the name attributes $clone .find('[name="strofes"]').attr('name', 'strofes-' + counter6).end(); $clone.find('.removeButton6').data('to-remove', counter6); // add this counter for later removing it var $template = $('#dose2'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-dose2-index', counter6) .insertBefore($template); $clone .find('[name="uesi"]').attr('name', 'uesi-' + counter6).end(); $clone.find('.removeButton6').data('to-remove', counter6); // add this counter for later removing it }) // Remove button click handler .on('click', '.removeButton6', function() { counter6 = counter6 - 1; var indexToRemove = $(this).data('to-remove'); $('[data-dose1-index="' + indexToRemove + '"]').remove(); $('[data-dose2-index="' + indexToRemove + '"]').remove(); });