Question

function adddiv {
   var c1 = document.getElementById('area1').value;
   var divElement = document.createElement("div");  
   divElement.id = "myDiv";  
   divElement.className = "myDivClass";  
   divElement.innerHTML = c1;  
   document.body.appendChild(divElement);
}

上面是我用代码动态添加div的代码。

如何使用按钮动态删除div？

Answer 1

你的函数声明是错误的。你错过了函数声明中的右括号。它将是

function adddiv(){}

使用removeChild () 方法。

document.body.removeChild(divElement);

由于javascript中的函数创建了自己的作用域，divElement位于adddiv函数的私有作用域内。如果要删除，则需要在adddiv函数中定义removeChild方法;

如果您希望从脚本中的任何位置访问它，请将divElement定义为全局变量，或者直接在adddiv函数内的window对象上创建此变量。

window.divElement = document.createElement("div");

function adddiv() {
  
   var divElement = document.createElement("div");  // private scope
   divElement.id = "myDiv";  
   divElement.style='width:100px;height:100px;border:1px solid black;'
   divElement.className = "myDivClass";  
   divElement.innerHTML = 'new div';  
   document.body.appendChild(divElement);
    var btn=document.getElementById('btn');
   btn.addEventListener('click',function(){  // if this function is defined outside it won't work because divElement will be out of its scope
         document.body.removeChild(divElement);
   });
   
}
  

window.addEventListener('load',adddiv);

<input type='button' value='remove' id='btn'>

Answer 2

您可以将div存储在变量中，稍后将其删除：

function adddiv {
   var c1 = document.getElementById('area1').value;
   var divElement = document.createElement("div");  
   divElement.id = "myDiv";  
   divElement.className = "myDivClass";  
   divElement.innerHTML = c1;  
   document.body.appendChild(divElement);

   // get button element
   var button = document.getElementById("..");
   button.addEventListener("click", function() {
       divElement.parentNode.removeChild(divElement);
   });
}

Answer 3

或者你可以使用id：

var div = document.getElementById('myDiv'); 
div.remove();

如何删除使用javascript动态创建的div

3 个答案: