javascript - 更改动态添加的 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--;
            })
        });

标签： javascriptjqueryforms

Answer 1

下面的代码将允许您为多个输入组添加任意数量的额外输入。

输入组需要包装在一个带有 class 的 div 中.input-wrapper，带有属性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>