Как удалить ранее созданный элемент перед добавлением нового набора элементов

<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>

Приведенный выше код принимает значение из текстового поля и создает количество кнопок, равное значению, введенному в текстовое поле. Теперь, если новое значение введено в текст I хотел очистить ранее созданную кнопку перед созданием новых кнопок. Как это можно достичь?Как удалить ранее созданный элемент перед добавлением нового набора элементов

источник

2016-07-21 sagar

Назначьте имя класса вновь создаваемым элементам.

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

Затем удалите все элементы byClass, прежде чем добавлять новые.

источник

2016-07-21 08:06:06

Просто создайте элемент, то есть div, и очистите его перед добавлением новых элементов. Что-то вроде:

<html> 
<body> 
<div id="result"></div> 
<input type="text" id="number"/> 
<input type="button" value="create button" onclick="createbtn()"/> 
<br> 
<script> 
    function createbtn(){ 
     var n=document.getElementById("number").value; 
     document.getElementById("result").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); 
      document.getElementById("result").appendChild(x); 
     } 

    } 
</script>

JSFIDDLE

источник

2016-07-21 08:08:38 cor

Добавить кнопку элемент контейнера и добавить все кнопки в этом контейнере. Очистите содержимое, прежде чем добавлять новые.

источник

2016-07-21 08:09:40 santon

Создайте контейнер, в который можно положить кнопки. В начале вашей функции очистите контейнер.

<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/

источник

2016-07-21 08:11:22

Как удалить ранее созданный элемент перед добавлением нового набора элементов

ответ

Смежные вопросы