Jquery 帮助选择输入字段

Question

I am trying to select the input field that is added when pressing the "add info" button.

Now the first input field is removed when pressed "Remove", it should be the input field that was added: http://jsfiddle.net/gDChA/14/ Jquery:

function findLastInput ( element ) {
  return $( element ).parent().prev().find('input').last();
}
$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();

    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info',
      'type' : 'input'
    });    
    $(this).closest('.button-row').append(element);
})
$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    findLastInput(this).remove('input');
});

It is this selector that is wrong: findLastInput(this).remove('input');

HTML:

<div class="input string optional"><label for="virksomhed_navn" class="string optional"> Navn</label><input type="text" size="50" name="virksomhed[navn]" maxlength="255" id="virksomhed_navn" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

    <div class="input string optional"><label for="virksomhed_name" class="string optional">Name</label><input type="text" size="50" name="virksomhed[name]" maxlength="255" id="virksomhed_name" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>


    <div class="input string optional"><label for="virksomhed_pis" class="string optional">Pis</label><input type="text" size="50" name="virksomhed[v]" maxlength="255" id="virksomhed_pis" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

Answer 1

This line, $(this).closest('.button-row').append(element); , adds the new input field to div.button-row instead of div.input . So when you delete the last input in div.input , the first and only input field get deleted, leaving the new one in div.button-row .

EDIT: Just noticed that you say you want the input in another comment. In that case you need to update the part that removes the input.

To select an input field, use the focus method. Keep in mind that the field must be in the document, visible, and enabled (ie that it can be selected)

So you only need to change the last line of each function:

$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();

    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info',
      'type' : 'input'
    });
    $(this).closest('.button-row').append(element);
    element.focus();
})


$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    $(this).closest('.button-row').find('input').remove();
});

Answer 2

Here you go

Working demo

Repleace $(this).closest('.button-row').append(element); in your code by $(this).parent().append(element); and findLastInput(this).remove('input'); by $(this).parent().find("input").remove(); .

Answer 3

Instead of:

findLastInput(this).remove('input');

you need:

$(this).siblings('input').remove();