Question

我创建了一个名为“添加详细信息”的按钮。

点击“添加详细信息”按钮后，会创建一个记录，其中包含一个文本字段，一个名为“详细信息”的按钮和一个名为“删除”的按钮（使用DOM）。
点击“删除”按钮后，该特定记录将被删除。
点击“详细信息”后，会出现一个弹出窗体，其中包含两个按钮，即“关闭”按钮（用于关闭弹出窗体）和“添加文本字段”按钮。
单击弹出窗体中的“添加TextField”按钮，应在每个“onclick”实例上生成一个新的文本字段。

现在我有一个小问题。单击“添加详细信息”按钮时会生成上面提到的记录（包括文本字段，“详细信息”按钮和“删除”按钮）。

单击“删除”按钮时，也会删除特定记录。即使单击“详细信息”按钮，也会生成弹出窗体。单击“关闭”按钮（以弹出窗体形式），弹出窗体将关闭。

现在单击“添加TextField”按钮（以弹出窗体形式），将添加文本字段（使用DOM）。但是当我在添加文本字段（使用“添加文本字段”按钮）后关闭弹出窗体并重新打开该弹出窗体时，我添加的文本字段不存在。

基本上，弹出窗体中的“添加TextField”按钮只能工作一次。即使我添加新记录并单击详细信息以生成新的弹出窗体并单击“添加TextField”按钮，也不会生成任何文本字段。

我觉得我在这里错过了一些东西。以下是以下的HTML和Javascript代码。请原谅javascript代码的长度。还请告诉我是否有更好的方法来解决这个问题。

HTML代码：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Add Plus Add Div</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="div2"></div>
    <button type="button" onclick="addText()">Add Detail</button>
  </body>
</html>

JAVASCRIPT代码：

<script lang="javascript" type="text/javascript">
  function DivOpen() {
    document.getElementById('div1').style.display = "block";
  };

  function DivClose() {
    document.getElementById('div1').style.display = "none";
  };

  var addTextArray = [];
  function addText() {
    var addTextIndex = addTextArray.length
    var a = document.createElement("input");
    a.type = "text";
    a.id = "text1" + addTextIndex;
    addTextArray.push(div2.appendChild(a));

    var c = document.createElement("button");
    c.type = "button";
    c.innerHTML = "Details";
    c.id = "DetailButton" + addTextIndex;
    c.setAttribute("onclick", "AddDetails1()");
    div2.appendChild(c);

    var b = document.createElement("button");
    b.type = "button";
    b.id = "RemoveButton" + addTextIndex;
    b.innerHTML = "Remove";
    b.setAttribute("onclick", "removeText("+addTextIndex+")");
    div2.appendChild(b);

    var d = document.createElement("br");
    d.id = "br1" + addTextIndex;
    div2.appendChild(d);
  };

  function removeText(addTextIndex) {
    var remText = document.getElementById('text1' + addTextIndex);
    remText.parentElement.removeChild(remText);
    var remButtonDet = document.getElementById('DetailButton' + addTextIndex);
    remButtonDet.parentElement.removeChild(remButtonDet);
    var remButtonRem = document.getElementById('RemoveButton' + addTextIndex);
    remButtonRem.parentElement.removeChild(remButtonRem);
    var remBr = document.getElementById('br1' + addTextIndex);
    remBr.parentElement.removeChild(remBr);
  };

  var AddDetails1Array = [];
  function AddDetails1() {
    var AddDetails1Index = AddDetails1Array.length;
    var a1 = document.createElement("div");
    a1.id = "PopUpDiv" + AddDetails1Index; 
    a1.style.position = "fixed";
    a1.style.display = "block";
    a1.style.width = "100%";
    a1.style.height = "100%";
    a1.style.top = "0";
    a1.style.left = "0";
    a1.style.backgroundColor = "grey";
    a1.style.opacity = ".5";
    AddDetails1Array.push(document.body.appendChild(a1));

    var b = document.createElement("form");
    b.id = "innerForm";
    b.style.width = "500px";
    b.style.height = "200px";
    b.style.backgroundColor = "white";
    b.style.margin = "100px auto";
    b.style.border = "1px solid black";
    a1.appendChild(b);

    var c = document.createElement("button");
    c.type = "button";
    c.id = "buttonPopUpId";
    c.innerHTML = "Close";
    c.setAttribute("onclick", "ClosePopUp("+AddDetails1Index+")");
    b.appendChild(c);

    var d = document.createElement("button");
    d.type = "button";
    d.id = "AddTextInnerForm";
    d.innerHTML = "Add TextField";
    d.setAttribute("onclick", "AddTextField1()");
    b.appendChild(d);
  };

  function ClosePopUp(AddDetails1Index) {
    document.getElementById('PopUpDiv' + AddDetails1Index).style.display = "none";
  };

  function AddTextField1() {
    var a = document.createElement("input");
    a.type = "text";
    a.name = "text1";
    a.id = "text1Id";
    innerForm.appendChild(a);
  };

</script>

在DOM对象中添加和删除DOM对象

0 个答案: