通过动态输入框实现 JavaScript 元素添加和删除

2023-11-19 14:17:45

动态创建和删除 HTML 元素：赋予你的网页交互性和功能性

在现代网页开发中，动态创建和移除 HTML 元素至关重要，因为它可以显着增强用户体验并实现各种交互式功能。在这篇全面的指南中，我们将深入探讨如何使用 JavaScript 的 createElement()、appendChild() 和 removeChild() 方法来动态管理网页元素。

创建 HTML 元素

创建新元素的过程始于 createElement() 方法。它接受一个参数，指定要创建的元素的类型。例如，要创建 <div> 元素，可以使用以下代码：

const newDiv = document.createElement("div");

添加元素到现有元素

创建元素后，可以使用 appendChild() 方法将其添加到现有元素中。appendChild() 将新元素作为子元素添加到指定元素的末尾。例如，要将新创建的 <div> 元素添加到具有 ID 为 "container" 的现有 <div> 元素中，可以使用以下代码：

const container = document.getElementById("container");
container.appendChild(newDiv);

删除元素

要删除元素，可以使用 removeChild() 方法。removeChild() 方法接受一个参数，指定要删除的子元素。例如，要从具有 ID 为 "container" 的现有 <div> 元素中删除子 <div> 元素，可以使用以下代码：

const container = document.getElementById("container");
container.removeChild(newDiv);

动态添加和删除输入框

现在我们已经掌握了创建、添加和删除元素的基础知识，我们可以将这些概念应用于动态添加和删除输入框。这在需要用户输入的交互式应用程序中非常有用。

创建输入框函数： 创建一个函数 createInput()，它接受输入框的 ID 和名称作为参数。此函数负责创建输入框元素并返回它。
添加输入框函数： 创建一个函数 addInput()，它接受输入框的 ID 和要添加到的元素的 ID 作为参数。此函数负责将输入框元素添加到指定元素中。
删除输入框函数： 创建一个函数 removeInput()，它接受输入框的 ID 和要从中删除的元素的 ID 作为参数。此函数负责从指定元素中删除输入框元素。
HTML 按钮： 在 HTML 中创建按钮，用于添加和删除输入框。
事件侦听器： 为按钮添加事件侦听器，并在单击时调用相应的功能。

以下示例代码演示了如何动态添加和删除输入框：

<div id="container"></div>
<button id="add-button">Add Input</button>
<button id="remove-button">Remove Input</button>

<script>
  // 创建输入框
  function createInput(id, name) {
    const input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", id);
    input.setAttribute("name", name);
    return input;
  }

  // 添加输入框
  function addInput(id, parentId) {
    const parent = document.getElementById(parentId);
    const input = createInput(id, "input-" + id);
    parent.appendChild(input);
  }

  // 删除输入框
  function removeInput(id, parentId) {
    const parent = document.getElementById(parentId);
    const input = document.getElementById(id);
    parent.removeChild(input);
  }

  // 为按钮添加事件侦听器
  const addButton = document.getElementById("add-button");
  const removeButton = document.getElementById("remove-button");

  addButton.addEventListener("click", () => {
    const id = "input-" + (detail_div - 1);
    addInput(id, "container");
  });

  removeButton.addEventListener("click", () => {
    const id = "input-" + (detail_div - 1);
    removeInput(id, "container");
  });
</script>