添加和刪除支票和輸入框

Question

我試圖添加和刪除表單中的輸入和複選框，但我遇到的示例不允許我使用自定義文本添加這些內容。我如何使用JQuery來實現這一點？

這裏是我的模板：https://jsfiddle.net/cg1uoh9w/4/

下面是一個例子：http://jsfiddle.net/KPkJn/9/

<!-- --> 

<div class="sub-container-title">This is what I want to appear above the first box</div> 

<ul class="no-style"> 
    <li>Title</li> 
    <li> 
    <input type="text" name="text_area" class="text_area added" maxlength="50" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">remove</button> 
    </span> 
    </li> 
</ul> 

<!-- --> 

<div class="sub-container-title">This is what I want to appear above the second box</div> 

<ul class="no-style"> 
    <li> 
    <label><input type="checkbox" value="">Option 1</label> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">remove</button> 
    </span> 
    </li> 
</ul> 

Answer 1

你這是怎麼做到這一點...

<div> 
    <input type="text" name="add_input_field" class="add_input_field" placeholder="Write input name"><input type="submit" name="add_input_submit" class="add_input_submit"><br /> 
    <input type="text" name="add_checkbox_field" class="add_checkbox_field" placeholder="Write checkbox name"><input type="submit" name="add_checkbox_submit" class="add_checkbox_submit"><br /> 
</div> 
<div class="new_fields_container"> 
</div> 

多數民衆贊成在普通的HTML外觀在提交按鈕和文本字段上的類標記。

然後用jQuery

$('.add_input_submit').click(function(event) { 
    event.preventDefault(); 
    var input_name = $('.add_input_field').val(); 
    var remove_name = input_name.split(' ').join('_'); 

    $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="text" name="' + input_name + '" placeholder="' + input_name + '">' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>'); 
}); 

$('.add_checkbox_submit').click(function(event) { 
    event.preventDefault(); 
    var input_name = $('.add_checkbox_field').val(); 
    var remove_name = input_name.split(' ').join('_'); 


    $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="checkbox" name="' + input_name + '" value="' + input_name + '"> ' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>'); 
}); 

$('body').on('click', '.remove', function(event) { 
    event.preventDefault(); 
    var input_name = $(this).attr('new_input_name'); 
    $('[new_input='+input_name+']').remove(); 
}); 

jQuery的正在監聽取決於類名提交按鈕點擊例如$（ 'add_input_submit'）。

The .val（）;實際上是讀取輸入字段，所以您想要它的名稱並將其保存在變量上，然後您可以將其包含在您將在下一步中創建的HTML中。

The event.preventDefault（）;將停止字面提交的「表單」（jQuery不需要提交實際的表單，因爲它始終都在監聽點擊）。

的.append（）是將實際的HTML代碼（所以你的新的輸入值）到在此情況下，選擇動態DIV new_fields_container

REMOVE

立即刪除我添加了$（'body'）。on（'click'，'.remove'這個.click是不同的，因爲它需要監聽ajax生成的元素，這就是爲什麼它會解析整個網站的正文聆聽點擊。

我還添加了刪除按鈕生成的HTML，並添加了DIV容器的每一個新的領域。

現在的.remove（）;將搜索div與new_input =「」屬性，它將刪除它。

繼承人的代碼

命令刪除更新：

Fiddle example

希望這有助於！