使用 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);
    });

});

此脚本的目的是通过单击“为 Stuff 添加新字段”在父 div 中添加一个选择和一个输入字段，并通过单击“新建事物”按钮添加一个具有相同内容的新 div。 我被困在哪里：

• 我想动态添加/删除每个生成的 div 中的每个字段。我设法添加了字段，但它仅在显示 div 时添加 来自 html。如果我生成另一个，我不能再这样做了。一世 不明白！
• 我想动态添加/删除 div。再一次，我已经 设法添加新的 div，但我不知道如何动态 删除一个 div。
• 我想在每个 div 上添加一个标题（例如 Div #1， Div#2...etc) 所以当我删除第二个 div 时，例如，用户 仍然可以看到 Div #1、Div#2、Div#3 等...
• 另一个问题是我 不能在每个生成的 .我需要添加 以这种方式选择，因为我将使用 php 为每个 div 取值， 如果我给每个人都赋予相同的名字，我不能把它发布在 形式。所以我需要在每种输入类型上使用不同的名称 选择我生成。

我是新手，3天前我对jQuery一无所知。

Answer 1

您需要使用委托事件来动态添加元素

试试这个

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

如果你使用 class 而不是 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