テキストフィールドを追加し、動的削除ボタンでテキストフィールドを削除

Question

私は2つの関数 'add'と 'delete'を持っています。私はカウンタを持っている15の入力テキストフィールドを追加するのに限界があります。今私はカウンタ値を減らすために同様にフィールドを削除する必要があります。私は動的にそれぞれの入力フィールドに削除ボタンを追加しました。しかし、私は入力フィールドを正しく削除できません。

$(document).ready(function() { 
    var counter = 2; 

    $(function() { 
    $("#new_addButton,#addButton").bind("click", Add); 
    }); 

    function Add() { 
    if (counter > 15) { 
     $('.not_more_than_fifteen').show(); 
     alert(counter); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('li')).attr("id", 'job_responsibility' + counter); 
    newTextBoxDiv.after().html('<input type="text" class="new_highlight high_light" placeholder="Enter job responsibility" name="textbox' + counter + '" id="textbox' + counter + '" value="" ><span class="remove_me"><i class="fa fa-trash"></i></span>'); 
    newTextBoxDiv.appendTo(".new_highlight"); 
    counter++; 
    $(".remove_me").on("click", Delete); 
    } 

    function Delete() { 
    alert(counter); 
    $(this).parent().remove(); 
    counter = counter - 1; 
    console.log(counter) 
    return false; 
    } 
}); 

<ul class="new_highlight"> 
    <li><input class="form-control high_light" placeholder="" value="Driven and motivated individual who thrives in a dynamic and evolving environment." type="text"></li> 
    <li><input class="form-control high_light" placeholder="" value="Basic understanding of TCP/IP and Internet-facing firewalls." type="text"><span class="remove_me"><i class="fa fa-trash"></i></span></li> 
    <li><input class="form-control high_light" placeholder="" value="Minimum of five years of Linux and Windows administration" type="text"><span class="remove_me"><i class="fa fa-trash"></i></span></li> 
    <li><input class="form-control high_light" placeholder="" value="Experience in configuration and troubleshooting of Tomcat server engine" type="text"><span class="remove_me"><i class="fa fa-trash"></i></span></li> 
</ul> 
<div class=""> 
    <span class="pull-left btn-add" id="addButton">Add More Responsibilities</span> 
    <span class="not_more_than_fifteen pull-right">You have already added 15 rows!</span> 
    <div class="clear"></div> 
</div> 

Answer 1

あなたのコードは少し混乱して、その中の不要なコードを持っています。私の解決策はこれです。

HTML

<button id="add">add</button> 

JS

var counter=0; 
$(document).ready(function(){ 
    $('#add').click(function(){ 
    if(counter<15){ 
    var inp = document.createElement('input'); 
    var del = document.createElement('button'); 
    $(del).addClass('delete'); 
    $(del).attr('onclick','remove(this)'); 
    $(del).text('delete'); 
    $('#add').after(inp); 
    $('#add').after(del); 
    $('#add').after('<br>'); 
    counter++; 
    } 
    }); 
}); 

function remove(e){ 
    $(e).next('input').remove(); 
    $(e).prev('br').remove(); 
    $(e).remove(); 
    counter--; 
} 

、あなたが動的に `elements`を追加するために**`イベントdelegation`を行う必要がありDEMO