Question

我正在尝试生成不同的div并在他们完成工作后删除它们。我的代码的简单版本是：

   function eraseDiv(){
      var c = document.getElementById("cn1");
      c.parentNode.removeChild(child);
   }

function spawnDiv(){
    var x = document.getElementById("test");
    var d = document.createElement("div");
    d.id = "child";
    d.style.width = "500px";
    d.style.height = "30px";
    var content = "Some text for testing!" + "<a href=\"?\" onclick=eraseDiv(); return false; > Delete</a>";
    d.innerHTML = content;
    if (document.getElementById("cn1").innerHTML.trim() == "")
        document.getElementById("cn1").appendChild(d); 
    else 
        document.getElementById("cn2").appendChild(d);
}

<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>'

问题是当删除第一个衍生的div时，将删除所有div。任何帮助表示赞赏如何解决这个问题。

Answer 1

这样的事情怎么样：

function eraseDiv(target){
    var div = target.parentNode;
    var container = div.parentNode;
    container.removeChild(div);
}

function spawnDiv(){
    var x = document.getElementById("test");
    var d = document.createElement("div");
    d.style.width = "500px";
    d.style.height = "30px";
    var content = "Some text for testing!" + "<button onclick=eraseDiv(this);> Delete</button>";
    d.innerHTML = content;
    if (document.getElementById("cn1").innerHTML.trim() == "")
        document.getElementById("cn1").appendChild(d); 
    else 
        document.getElementById("cn2").appendChild(d);
}

<button type="button" name="submit" onclick="spawnDiv();">Spawn</button>
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>

首先，因为每当您显然不想使用提交输入的提交功能时，您都会返回false，因此请将其更改为按钮。

第二件事，从生成的div中删除ID，因为你永远不应该有两个具有相同ID的div。

第三件事（就像第一件事一样），因为你没有使用锚元素的链接功能，你应该把它改成一个按钮（如果你愿意，可以使用CSS你可以像锚一样设置样式）。 / p>

第四件事，在删除按钮内，将this作为参数添加到eraseDiv函数中。您现在可以访问使用函数参数单击的按钮，而不是尝试通过ID查找它。

Answer 2

另一种方法是为div创建一个id

<html>
<body>
    <input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
    <div id= "test">
    <div id= "cn1"></div>
    <div id= "cn2"></div>
    </div>
    <script>
        function eraseDiv(j){
              var c = document.getElementById('child'+j);
              c.parentNode.removeChild(c);   
            }
        var i=1;
        function spawnDiv(){
            var x = document.getElementById("test");
            var d = document.createElement("div");

            d.id = "child"+i;
            d.style.width = "500px";
            d.style.height = "30px";
            var content = "Some text for testing!" + "<u ><a  onclick=eraseDiv("+i+++"); > Delete</a></u>";
            d.innerHTML = content;
            if (document.getElementById("cn1").innerHTML.trim() == "")
                document.getElementById("cn1").appendChild(d); 
            else 
                document.getElementById("cn2").appendChild(d);
        }
    </script>
</body>
</html>

Answer 3

对代码进行最简单的修复，而不修改您所执行操作的功能（以及页面视图），将href="?"替换为href="#"。

在原始代码中，当您使用“？”作为超链接执行<a href="?">link</a>之类的操作时，这实际上会执行GET请求，该请求将重新加载页面。这很棘手，因为它使您的删除代码看起来正在从cn1和cn2 div中删除所有衍生的div。

将href=?更改为href=#可防止发生GET请求。以下是直接进行此更改的代码段，该代码会导致原始代码的正确行为（通过删除cn1中的衍生元素）。您将不得不进一步修改代码，使其按照您的意愿行事。

function eraseDiv(){
  var c = document.getElementById("cn1");
  c.parentNode.removeChild(c);
}

function spawnDiv(){
    var x = document.getElementById("test");
    var d = document.createElement("div");
    d.id = "child";
    d.style.width = "500px";
    d.style.height = "30px";
    var content = "Some text for testing!" + "<a href=\"#\" onclick=eraseDiv(); return false; > Delete</a>";
    d.innerHTML = content;
    if (document.getElementById("cn1").innerHTML.trim() == "")
        document.getElementById("cn1").appendChild(d); 
    else 
        document.getElementById("cn2").appendChild(d);
}

  <input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
  <div id= "test">
      <div id= "cn1"></div>
      <div id= "cn2"></div>
  </div>

使用JavaScript删除特定div

3 个答案: