Question

<html>
<body>
<input type="text" id="number"/>
<input type="button" value="create button" onclick="createbtn()"/> 
<br> 
<script>
function createbtn() 
{
 var n=document.getElementById("number").value;

 for(i=1;i<=n;i++)
 {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "button");
  x.setAttribute("value", i);
  x.setAttribute("id","x"+i);
  document.body.appendChild(x);

 }
}
</script>
</body>
</html>

上面的代码从文本字段中获取值并创建等于在文本字段中输入的值的按钮数。现在如果在文本中输入新值我想在创建新按钮之前清除先前创建的按钮。这怎么可能是实现？

Answer 1

只需创建一个元素，即"i"，然后在添加新元素之前将其清除。类似的东西：

div

JSFIDDLE

Answer 2

为新创建的元素指定一个类名。

 x.setAttribute("class", "some-class-name");

然后在添加新元素之前删除所有元素byClass。

Answer 3

添加按钮容器元素并将所有按钮添加到该容器。在添加新内容之前清除内容。

Answer 4

创建一个用于放置按钮的容器。在功能开始时，清除容器。

<input type="text" id="number"/>
<input type="button" value="create button" onclick="createbtn()"/> 
<div class="buttons"></div>

<script>
function createbtn() 
{
 var buttons_container = document.getElementsByClassName("buttons")[0];
 var n=document.getElementById("number").value;

 buttons_container.innerHTML = '';

 for(i=1;i<=n;i++)
 {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "button");
  x.setAttribute("value", i);
  x.setAttribute("id","x"+i);
  buttons_container.appendChild(x);

 }
}
</script>

https://jsfiddle.net/c3j1ebre/

如何在添加新元素集之前删除以前创建的元素

4 个答案: