如何在动态创建的输入中显示输入的多个值？

在动态创建的输入中显示输入的多个值可以通过以下步骤实现：

创建一个容器元素，例如 <div> 或 <ul>，用于包含动态创建的输入。
使用 JavaScript 动态创建输入元素，例如 <input> 或 <select>，并设置相应的属性和事件监听器。
在每次用户输入时，将输入的值存储在一个数组或对象中。
使用循环遍历数组或对象，将每个值创建为一个新的输入元素，并将其添加到容器元素中。
可以选择在每个输入元素旁边添加删除按钮，以便用户可以删除特定的输入值。
最后，将容器元素插入到页面中的适当位置，以显示所有输入的值。

以下是一个示例代码，演示如何在动态创建的输入中显示输入的多个值：

<!DOCTYPE html>
<html>
<head>
  <title>动态创建输入</title>
</head>
<body>
  <div id="inputContainer"></div>

  <button onclick="addInput()">添加输入</button>

  <script>
    var values = []; // 存储输入的值

    function addInput() {
      var input = document.createElement("input");
      input.type = "text";
      input.addEventListener("input", storeValue); // 监听输入事件

      var deleteButton = document.createElement("button");
      deleteButton.textContent = "删除";
      deleteButton.addEventListener("click", deleteInput); // 监听删除按钮点击事件

      var container = document.getElementById("inputContainer");
      container.appendChild(input);
      container.appendChild(deleteButton);
    }

    function storeValue(event) {
      var value = event.target.value;
      values.push(value);
    }

    function deleteInput(event) {
      var index = Array.from(event.target.parentNode.children).indexOf(event.target);
      values.splice(index / 2, 1); // 删除对应的值和删除按钮
      event.target.previousSibling.remove(); // 删除输入元素
      event.target.remove(); // 删除删除按钮
    }
  </script>
</body>
</html>

这段代码创建了一个按钮，点击按钮会动态添加一个文本输入框和一个删除按钮。每次用户输入时，输入的值会存储在 values 数组中。用户可以通过点击删除按钮来删除特定的输入值。

请注意，这只是一个简单的示例，你可以根据实际需求进行修改和扩展。对于更复杂的场景，你可能需要使用更多的 HTML、CSS 和 JavaScript 来实现所需的功能。

腾讯云相关产品和产品介绍链接地址：