Добавить / удалить несколько типов ввода текста с помощью jQuery

Damian Ruiz спросил: 13 октября 2017 в 06:36 в: javascript

Я пытаюсь создать два раздела для ввода, где пользователи могут добавлять или удалять текстовые поля, так выглядит мой код.

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = ('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
			//$(wrapper).slideDown(800);
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

 </br>
 
  <div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

Ссылка"удалить" работает, однако, когда я пытаюсь добавить текстовое поле, текстовое поле добавляется в оба раздела. Есть ли способ добавить текстовое поле только в div, откуда нажата ссылка "добавить"? Спасибо.


0 ответов