스팬으로 입력 필드 제거

Question

새 입력 필드를 만들 때이 코드를 작성 했으므로 필드를 제거 할 수 있도록 수정해야합니다. mySpan에 var 카운터를 추가하는 방법을 익히고 나서 $(#removeBox).click(function()을 만들고 거기에서 내가 삭제해야 할 입력 필드의 ID를 얻을 수 있습니다. 하지만 나는 span clickable을 할 수 없다. 그리고 나는 이것을 <a class="deleteBox' + counter'"><span class="glyphicon glyphicon-remove"></span></a>과 같이하려고 할 때 그것은 내가 실종되었다고 말한다. ). 여기에이 문제에 대한 몇 가지 해결책이 있다는 것을 알고 있지만, 저는 제 일을하고 싶었습니다.

var counter = 2; 
    $("#addTextField").click(function() { 
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter); 
     newTextBoxDiv.after().html('<input type="text" name="textbox' + counter + '" placeholder="Category" /><span id="mySpan" class="glyphicon glyphicon-remove"></span>'); 
     newTextBoxDiv.appendTo("#textboxgroup"); 
     counter++; 

    }); 

Answer 1

같은 시도 : 트릭을 사용하면 클릭

내부 $(this)으로 얻을 수있는 당신이 클릭 한 요소를 제거하는 것입니다

코드에 ID가 항상 고유해야하는 것이 바람직하지 않은 모든 클릭에 ID <span id="mySpan"을 추가했습니다. 한 번 이상 추가하면 더 이상 고유하지 않습니다. 클래스를 사용하는 것이 더 좋습니다 ...

Answer 2

이 시도 :

var counter = 0; 
 
$('#add').click(function() { 
 

 
    $('#target').append('<span>New Input: <input type="text"><button id="remove' + counter + '">Remove</button><br></span>'); 
 

 
    $('#remove' + counter).click(function() { 
 

 
    $(this).parent().html(''); 
 
    counter--; 
 
    }); 
 
    counter++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="target"></div>