Добавить/удалить элементы динамически с помощью JQuery и HTML

Question

Это мой HTML:

<div id="container"> 
    <input type="button" id="add" value="New Thing"> 
    <div id="addNew_1" class="new"> 
     <select name="select_1"> 
      <div id="options"> 
       <option value="nothing">Nothing</option> 
       <option value="snothing">Second Nothing</option> 
      </div> 
     </select> 
     <input type="text" id="input_1" value="Here goes your stuff"> 
     <input type="button" id="newField_1" value="New Field For Stuff"> 
     <br> 
     <br> 
    </div> 
</div> 

И это мой JQuery:

$(document).ready(function() { 
    var select = 1; 
    var divid = 1; 
    var options = $('#options'); 
    $('#newField_' + divid).on('click', function() { 
     select++; 
     var content = '<select name=select_' + select + '>' + options + '</select><input type="text" name="input_' + select + '" value="Here goes your stuff"><input type="button" class="remove" id="remove_' + select + '" value="Remove this field!"><br><br>'; 
     $('#addNew_' + divid).append(content); 
     $('.remove').on('click', remThis); 
    }); 

    function remthis() { 
     $(this).parents('div').remove(); 
    } 
    $('#add').on('click', function() { 
     divid++; 
     select++; 
     var thing = '<div id="addNew' + divid + '" class="new"><select name=select_' + select + '>' + options + '</select><input type="text" name="input_' + select + '" value="Here goes your stuff"><input type="button" id="newField_' + divid + '" value="New Field For Stuff"></div><br><br>'; 
     $('#container').append(thing); 
    }); 

}); 

Целью этого скрипта является добавление одного выбора и один полей ввода в родительский div, нажав «Добавить новое поле для материала» и добавив новый div с тем же контентом, нажав кнопку «Новая вещь». Где я застрял:

• Я хочу динамически добавлять/удалять каждое поле в каждом сгенерированном div. Мне удалось добавить поля, но он добавляется только тогда, когда он отображает div из html. Если я создам еще один, я больше не могу этого делать. I не понимаю!
• Я хочу динамически добавлять/удалять divs. Опять же, мне удалось добавить новые divs, но я понятия не имею, как динамически удалить div.
• Я хочу добавить заголовок на каждый div (например, Div # 1, Div # 2 ... и т. Д.), Поэтому, когда я удаляю второй div, например, пользователь все еще может видеть Div # 1, Div # 2, Div # 3 и т. Д.
• Другая проблема заключается в том, что я не может добавлять параметры для каждого сгенерированного. Мне нужно было добавить опции таким образом, потому что я буду принимать значения для каждого div с php, , если я дам одно и то же имя для каждого, я не могу опубликовать его в форме . Поэтому мне нужно иметь другое имя для каждого типа ввода и выбрать .

Я новичок, 3 дня назад Я понятия не имел о jQuery.

Answer 1

вам нужно использовать делегированы на события для динамически добавляемых элементов

попробовать этот

$('#container').on('click','#newField_' + divid, function() { 
    ..... 

было бы реально легко, если вы используете класс вместо id ...

<div class="addNew" class="new"> 
.. 
<input type="text" class="input" value="Here goes your stuff"> 
<input type="button" class="newField" value="New Field For Stuff"> 

и использовать селектор классов.

$('#container').on('click','.newField', function() { 
    ..... 

нет необходимости заботиться о divid и select и его счетчик

примечание: вы пропустили имя атрибута вашего входного элемента

обновленный

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

$('#container').on('click','.newField', function() { 
     var newthing=$('div.addNew:first').clone() 
             .find('.newField') 
             .removeClass('newField') 
             .addClass('remove') 
             .val('Remove Field!') 
             .end(); 

    $('#container').append(newthing); 
}); 

$('#container').on('click','.remove', function() { 

    $(this).parent().remove(); 
}); 


$('#add').on('click', function() { 

    var thing=$('div.addNew:first').clone(); 
    $('#container').append(thing); 
}); 

скрипку here