Удаление динамически сгенерированных текстовых полей в JQuery

Question

Я провел большую часть своего времени, работая с PHP/HTML, и небольшой сценарий, который я пишу для своего рассудка (Paperwork, слишком много документов) заставил меня использовать JQuery. Я искал Google, SO и многое другое, но я не нашел ничего похожего на код, который я использую в настоящее время, или я потерялся на этом языке.

Код в основном представляет собой динамическую форму с возможностью добавления текстовых полей по мере необходимости. Каждое новое сгенерированное текстовое поле требуется (HTML5) для отправки формы, но если я создаю дополнительное текстовое поле, которое не требуется, я бы хотел удалить его (так что это не оставляет меня с полем, в котором я не необходимо, и не может отправить форму, потому что это необходимо).

JFiddle: http://jsfiddle.net/fmdx/jZU97/ (с использованием JQuery 1.10.1)

HTML

<div> 
<input type="checkbox" id="customcheck" name="custom" href="#custom">Custom Exceptions Needed?</div> 
<div id="custom" style="padding-left:40px;"> 
    <input type="text" id="exception_1" placeholder="Six foot utility..."><br> 
</div><!-- Ending Custom Div --> 
<div style="padding-left:40px;"><a id="add_field" href="#"><span>Add Another Exception</span></a> 
</div> 

JQuery

var counter = 1; 
$(function() { 
$('a#add_field').click(function() { 
    counter += 1; 
    $('#custom').append(
     '<input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="#">Remove</a><br>'); 
    }); 
}); 

основе кода выше, я отделался из учебника, который включает в себя о том, как взять всю информацию, представленную через эти динамические формы, и поместить их в базу данных. Итак, я действительно пытаюсь использовать этот код специально. (Учебное пособие: http://www.infotuts.com/dynamically-add-input-fields-submit-to-database)

Спасибо за любую помощь или совет заранее!

Answer 1

только добавить класс в кнопку Удалить, вы можете делать то, что вы хотите с этим кодом:

$(document).on('click', '.remove', function(){ 
    var $this = $(this); 
    $this.add($this.prev()).add($this.next()).remove(); 
}) 

Fiddle: http://jsfiddle.net/jZU97/5/

Но использование .next() и .prev() не очень рекомендуется, так я предложит вам перегруппировать свой добавленный ввод в div (по 1 для каждого добавленного) и использовать .closest('div').

Answer 2

ИЛИ

вы можете использовать делегат (присоединить обработчик одного или нескольких событий для всех элементов, которые соответствуют селектору, в настоящее время или в будущем, на основе определенного набора корневых элементов) из JQuery

http://api.jquery.com/delegate/

Answer 3

var counter = 1; 
$(function() { 
    $('a#add_field').click(function() { 
     counter += 1; 
     $('#custom').append('<div id="addedField_' + counter + '"><input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><button onclick="$(\'#addedField_' + counter + '\').remove()">Remove</button><br></div>'); 
    }); 
}); 

Answer 4

Вот ваш jsfiddle отредактирован http://jsfiddle.net/krasimir/jZU97/6

идея заключается в том, чтобы обернуть входной фи и кнопку в div.

var counter = 1, 
    custom = $('#custom'); 
$(function() { 
    $('a#add_field').click(function() { 
     counter += 1; 
     var newRow = $('<div class="row' + counter + '"><input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="javascript:void(0);" class="remove-text-box">Remove</a></div>'); 
     custom.append(newRow); 
     (function(index) { 
      newRow.find('.remove-text-box').click(function() { 
       custom.find('.row' + index).remove(); 
      }); 
     })(counter); 
    }); 
});