Question

我正在尝试选择按“添加信息”按钮时添加的输入字段。

现在按下“删除”时会删除第一个输入字段，它应该是添加的输入字段：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');
});

这个选择器是错误的：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).closest('.button-row').append(element);将新输入字段添加到div.button-row而不是div.input。因此，当您删除div.input中的最后一个输入时，第一个也是唯一的输入字段将被删除，而新的输入字段将保留在div.button-row。

编辑：刚刚注意到你说你想要另一个评论的输入。在这种情况下，您需要更新删除输入的部分。

要选择输入字段，请使用焦点方法。请记住，该字段必须位于文档中，可见并启用（即可以选择）

所以你只需要改变每个函数的最后一行：

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

你去吧

工作demo

$(this).closest('.button-row').append(element);代码$(this).parent().append(element);和findLastInput(this).remove('input');代$(this).parent().find("input").remove();。

Answer 3

而不是：

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

你需要：

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

Jquery帮助选择输入字段

3 个答案: