Question

对于我的程序，我有一个按钮，它将新创建的div附加到页面，并按照MydivIDis1，MydivIDis2，MydivIDis3等顺序依次命名这些新的div。这些新创建的div中的每一个都有一个“删除”按钮。删除按钮将删除它当前所在的div。但是，我不知道如何执行此操作。

在下面的代码中，我尝试使用javascript在每个div中创建一个“删除元素”按钮。该按钮与名为remove的onclick函数相关联。我还在button.onclick中指定了参数newDiv.id。但是，此代码无效。

<!DOCTYPE html>
<html>
<body>
<div id="MainContainer">
    <input type="button" value="Add Element" id="add" onClick="add();">
    <div id="InnerContainer">
    </div>
</div>
<script>
var mainDiv=document.getElementById("MainContainer");
var innerDiv=document.getElementById("InnerContainer");
var clicks=0

var add=function(){
    clicks += 1;

    var newDiv=document.createElement("div");
    newDiv.id="MydivIDis"+clicks;
    newDiv.innerHTML=newDiv.id

    mainDiv.appendChild(newDiv); //creates the new Div, with the id MydivIDis1, MydivIDis2, MydivIDis3 

    var button=document.createElement("button");
    var t=document.createTextNode("Remove Element");
    button.onclick=function(){
        remove(newDiv.id); //Here i am trying to specify to the program to take newDiv.id as the input to the remove function.
    };

    button.appendChild(t); //creates new button and appends to each new Div

    var remove=function(input){
        mainDiv.removeChild(input);
    }

    mainDiv.appendChild(button);
};
</script>
</body>
</html>

Answer 1

removeChild将节点作为参数而不是元素ID。

因此解决方案是将newDiv提供给remove函数。

button.onclick=function(){
    remove(newDiv);
};

Answer 2

您的删除语句错误，请删除此类元素

 mainDiv.removeChild(document.getElementById(input));

此外，根据您当前的设计，即使在删除div之后，移除按钮仍然存在，如果您想删除该按钮，您还必须替换此行

mainDiv.appendChild(button);

有了这个

newDiv.appendChild(button);

Answer 3

为什么不使用jQuery？这是一个很棒的图书馆。只需为要更改的div标签提供ID并将其删除即可。我将举例说明如何使用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  $("button").click(function(){
        $("#div1").remove();
  }

如何根据ID

3 个答案: