jquery帮助选择输入字段

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

Repleace $(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();