使用jQuery更改动态添加的div的ID

Question

我正在建立一个网站，您可以在其中放置个人信息并制作简历。 现在，我想在其中放置可以学习的课程，但是如何动态添加更多字段并更改元素的ID（+1），以便使用jQuery获得naam_opleiding1，naam_opleiding2？

<div class="input_fields_wrap">
    <input class="input-field" type="text" id="naam_opleiding" value="" placeholder="Naam opleiding"><br>
    <input class="input-field" type="text" id="naam_instituut" value="" placeholder="Naam instituut" /><br>
    <input class="input-field" type="text" id="startdatum" onfocus="(this.type='date')" value="" placeholder="Startdatum opleiding" /><br>
    <input class="input-field" type="text" id="einddatum" onfocus="(this.type='date')" value="" placeholder="Einddatum opleiding"/><br>
    <input class="input-field" type="text" id="overige_informatie"  value="" placeholder="Overige informatie"/><br>

        <button class="button add_field_button" id="opleiding_toevoegen" value="Opleiding toevoegen">Opleiding toevoegen</button>


$(wrapper).append('<div><br><br>' +
                    '<input class="input-field" name="mytext[]" type="text" id="naam_opleiding" value="" placeholder="Naam opleiding"><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="naam_instituut" value="" placeholder="Naam instituut" /><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="startdatum" value="" placeholder="Startdatum" /><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="einddatum" value="" placeholder="Einddatum"/><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="overige_informatie"  placeholder="Overige informatie"/><br>\n' +
                    '                        <a href="#" class="remove_field">Verwijder opleiding</a></div>'); //add input box
            }
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });

Answer 1

下面的代码可让您为多个输入组添加所需数量的额外输入。

输入组需要包装为类.input-wrapper的div，并设置属性placeholder和name，这些属性用于自动创建输入属性（包括唯一的id）。

“删除”按钮始终会删除与选择模式匹配的最后一个输入，这样，当您保存索引将按顺序存储的信息时即可。

出于演示目的，我对代码进行了一些简化，并对其进行了完整注释。

让我知道这是否不是您想要的

---

演示

// Add click event to .add-input buttons
$(document).on("click", ".add-input", function() {

  // Move up DOM tree to nearest wrapper
  el = $(this).closest(".input-wrapper");

  // Store name and placeholder for group
  name = el.attr("name");
  placeholder = el.attr("placeholder");

  // Count number of existing inputs by checking which have an id that starts with wrapper name
  // Using name here, in addition to input, so that you could add other inputs into the group wrapper if needed
  // You may want to switch .children to .find if you want to add more wrappers
  count = el.children("input[id^=" + name + "]").length;

  // Add to index
  next = parseInt(count + 1);

  // Append input
  el.append("<input id='" + name + "-" + next + "' placeholder='" + placeholder + " " + next + "'>");


});

// Add click event to .add-input buttons
$(document).on("click", ".delete-input", function() {

  // Move up DOM tree to nearest wrapper to get name
  name = $(this).closest(".input-wrapper").attr("name");
  
  // Move up DOM tree to nearest wrapper and then find last input that matches pattern and delete it
  $(this).closest(".input-wrapper").children("input[id^=" + name + "]").last().remove();

});

input,
label {
  width: 100%;
  margin-bottom: 4px;
}

.input-wrapper {
  border: 1px solid black;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="name" placeholder="Name">
<input name="email" placeholder="Email">

<div name="course" class="input-wrapper" placeholder="Course">

  <label>Courses</label>

  <button class="add-input">Add</button>
  <button class="delete-input">Delete</button>

  <input id='course-1' placeholder='Course 1'>
  <input id='course-2' placeholder='Course 2'>

</div>

<div name="qualification" class="input-wrapper" placeholder="Qualification">

  <label>Qualifications</label>

  <button class="add-input">Add</button>
  <button class="delete-input">Delete</button>

</div>