如何正确展示动态创建的输入框中录入的多组数据？

问题根源 #

• 你在showMail方法中直接使用$(".fname")/$(".lname")这类全局类选择器获取输入值，jQuery类选择器匹配到页面所有同类名元素时，val()方法只会返回第一个匹配元素的输入值，这就是你一直拿到第一条内容的核心原因。
• 新增区块模板里重复使用了id="one"/id="two"/id="three"/id="contact method"，HTML规定id属性全局唯一，重复id会导致DOM查询异常。
• 邮箱展示节点#contact_mail只有一个，每次新增联系人选择邮箱类型时都会覆盖原有邮箱内容，无法同时展示多个联系人的邮箱。
• 你动态生成的.contactIp区块的邮箱输入框没有加workemail/personalemail类名，导致全局选择时匹配不到新增区块的邮箱输入框。

修复后的代码 #

JS代码 #

// 删除区块逻辑保持不变
$('body').on('click', '.delbtn', function(e) {
  $(this).closest(".contactIp").remove();
});

// addpoc方法修正重复id、补全邮箱输入框类名
function addpoc() {
  let el = '';
  el += '<div class="contactIp"><div><div class="name"><label>First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label>Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div><select onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="personalmail">Personal Email</option></select></div><div class="two" style="display: none;"><input type="email" class="workemail" name="workemail" placeholder="Work email"></div><div class="three" style="display: none;"><input type="email" class="personalemail" name="personalemail" placeholder="Personal email"></div></div><br><br> <div><button class="delbtn"><span class="inbtn">&times</span>Delete</button></div></div>'
  $('.addelement').append(el);
}

// 重写showMail方法，限定查询范围为当前操作的联系人区块
function showMail(selecteop) {
  // 先定位当前操作的联系人根区块
  const currentBlock = $(selecteop).closest(".contactIp");
  // 只在当前区块内查询输入值
  const first = currentBlock.find(".fname").val();
  const second = currentBlock.find(".lname").val();
  const workemail1 = currentBlock.find(".workemail").val();
  const personalemail1 = currentBlock.find(".personalemail").val();
  
  document.getElementById("contact").innerHTML += '<br>' + first + " " + second;
  if (selecteop.value == "workmail") {
    currentBlock.find(".two").show();
    currentBlock.find(".three").hide();
    document.getElementById("contact_mail").innerText = workemail1;
  } else {
    currentBlock.find(".three").show();
    currentBlock.find(".two").hide();
    document.getElementById("contact_mail").innerHTML = personalemail1;
  }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Where can we reach YOU?</h1>
  <div class="addelement">
    <div class="contactIp">
      <div>
        <div class="name"><label>First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div>
        <div class="name"><label>Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div>
      </div>
      <div class="parent" style="width: 100%;">
        <div>
          <select onchange="showMail(this)">
            <option disabled selected>Prefered contact method</option>
            <option value="workmail">Work email </option>
            <option value="personalmail">Personal Email</option>
          </select>
        </div>
        <div class="two" style="display: none;">
          <input class="workemail" type="email" name="workemail" placeholder="Work email">
        </div>
        <div class="three" style="display: none;">
          <input class="personalemail" type="email" name="personalemail" placeholder="Personal email">
        </div>
      </div>
    </div>
  </div>

  <div style="width:100%">
    <button style="width:100%" id="addbtn" onclick="addpoc()">Add another point of contact</button>
  </div>

</div>
<p id="contact"></p>
<p id="contact_mail"></p>
</div>

额外优化建议 #

如果需要同时展示多个联系人的姓名+对应邮箱，可以调整展示逻辑，每次新增联系人时生成成对的姓名+邮箱展示节点，避免邮箱内容被覆盖。

内容的提问来源于stack exchange，提问作者user15895653