Dynamic form - DOM manipulation
I have a form where new input fields can be added via an add
link. Each newly added input field can also be removed via a remove
link.
What can I do so that the add and remove
link is only shown for the input field that was added last?
Example: jsfiddle - my code
$(function() {
$('a.add_input').live('click', function(event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
var newDiv = $($class).find('div:first').clone();
开发者_如何学C //alert(newDiv)
newDiv.append('<a href="" class="remove_input">remove</a>')
newDiv.find('input').each(function() {
$(this).val('');
});
$($class + ':first div:last').before(newDiv);
$(this).prev('a.add_input').remove();
alert(ok)
});
$('a.remove_input').live('click', function(event) {
event.preventDefault();
$(this).closest('div').remove();
});
});
Remove all but the last .add_input
from the collection:
$(this).closest('.find_input').find('.add_input:not(:last)').remove();
精彩评论