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