Как очистить все динамически созданные элементы SPAN

Question

Я создал код, который динамически создает некоторые поля в элементе SPAN. Одним из полей является значок удаления, который при нажатии кнопки запускает функцию для удаления выбранного диапазона. Теперь я хочу создать функцию, которая просто вытирает все промежутки, звучит просто, но она ломается после первого.

Это пример моего кода (модифицировал его для простоты):

<form> 
    <input type='text' id='item' value=''/> 
    <input type="button" value="Add" onclick="addItem()"/> 
    <input type="button" value="Clear All" onclick="clearItems()"/> 
    <span id="myForm"></span> 
</form> 

<script> 

    var global_i = 0; // Set Global Variable i 

    function increment() 
    { 
     global_i += 1; // Function for automatic increment of field's "ID" attribute. 
    }  

    function addItem() 
    { 
     increment(); 
     var item = document.getElementById("item").value; 

     var br = document.createElement('BR'); 
     var ip = document.createElement("INPUT"); 
     var im = document.createElement("IMG"); 
     var el = document.createElement('SPAN'); 

     ip.setAttribute("type", "text"); 
     ip.setAttribute("value", item) 
     ip.setAttribute("Name", "text_item_element_" + global_i); 
     ip.setAttribute("id", "id_item_" + global_i); 
     ip.setAttribute("style", "width:80px"); 

     im.setAttribute("src", "delete.png"); 
     im.setAttribute("onclick", "removeSpanElement('myForm','id_" + global_i + "')"); 

     el.appendChild(ip); 
     el.appendChild(im); 
     el.appendChild(br); 

     el.setAttribute("id", "id_" + global_i); 
     document.getElementById("myForm").appendChild(el); 
    } 

    function removeSpanElement(parentDiv, childDiv) 
    { 
     if (childDiv == parentDiv){ 
      return false; 
     } 
     else if (document.getElementById(childDiv)){ 
      var child = document.getElementById(childDiv); 
      var parent = document.getElementById(parentDiv); 
      parent.removeChild(child); 
      return true; 
     } 
     else{ 
      // Child div has already been removed or does not exist 
      return false; 
     }  
    } 

    /* This function only clears 1st span */ 
    function clearItems() 
    { 
     var remove = true; 
     var i = 1; 
     while(remove){ 
      remove = removeSpanElement("myForm","id_" + i); 
      i++; 
     } 
     global_i = 0; 
    } 

</script> 

В каждой строке для изображения я создал обработчик OnClick событие для запуска функции removeSpanElement (parentDiv, childDiv), и это работает хорошо. Поэтому, чтобы очистить их все, я думаю, что просто запускаю функцию через инкрементный цикл, clearItems(), но он останавливается после удаления первого, и я не могу понять, почему.

Answer 1

Вы можете просто добавить новый класс динамически добавленного диапазона (чтобы сделать его легко выбрать их), а затем удалить все элементы с дополнительным классом, как

var global_i = 0; // Set Global Variable i 
 

 
function increment() { 
 
    global_i += 1; // Function for automatic increment of field's "ID" attribute. 
 
} 
 

 
function addItem() { 
 
    increment(); 
 
    var item = document.getElementById("item").value; 
 

 
    var br = document.createElement('BR'); 
 
    var ins = document.createElement("INPUT"); 
 
    var im = document.createElement("IMG"); 
 
    var el = document.createElement('SPAN'); 
 

 
    ins.setAttribute("type", "text"); 
 
    ins.setAttribute("value", item); 
 
    ins.setAttribute("Name", "text_item_element_" + global_i); 
 
    ins.setAttribute("id", "id_item_" + global_i); 
 
    ins.setAttribute("style", "width:80px"); 
 

 
    im.setAttribute("src", "delete.png"); 
 
    im.setAttribute("onclick", "removeSpanElement('myForm','id_" + global_i + "')"); 
 

 
    el.appendChild(ins); 
 
    el.appendChild(im); 
 
    el.appendChild(br); 
 

 
    el.setAttribute("id", "id_" + global_i); 
 
    el.className = 'dynamic' 
 
    document.getElementById("myForm").appendChild(el); 
 
} 
 

 

 
/* This function only clears 1st span */ 
 
function clearItems() { 
 
    var spans = document.getElementsByClassName('dynamic'); 
 
    while (spans.length) { 
 
    spans[0].remove(); 
 
    } 
 
    global_i = 0; 
 
}

<form> 
 
    <input type='text' id='item' value='' /> 
 
    <input type="button" value="Add" onclick="addItem()" /> 
 
    <input type="button" value="Clear All" onclick="clearItems()" /> 
 
    <span id="myForm"></span> 
 
</form>

Answer 2

You использовали зарезервированное ключевое слово, и у вас была переменная undefined. Я редактировал код для вас. Сравните мой код с вашим, чтобы узнать, где ошибки.

<form> 
    <input type='text' id='item' value=''/> 
    <input type="button" value="Add" onclick="addItem()"/> 
    <input type="button" value="Clear All" onclick="clearItems()"/> 
    <span id="myForm"></span> 
</form> 

<script> 

    var global_i = 0; // Set Global Variable i 

    function increment() 
    { 
     global_i += 1; // Function for automatic increment of field's "ID" attribute. 
    }  

    function addItem(){ 
     increment(); 
     var item = document.getElementById("item").value; 

     var br = document.createElement('BR'); 
     var ig = document.createElement("INPUT"); // "in" is a reserved keyword. It can't be used as a variable 
     var ip = document.createElement("IMG"); 
     var el = document.createElement('SPAN'); 

     ig.setAttribute("type", "text"); // modified 
     ig.setAttribute("value", item) // 
     ig.setAttribute("Name", "text_item_element_" + global_i); // 
     ig.setAttribute("id", "id_item_" + global_i); // 
     ig.setAttribute("style", "width:80px"); // 

     ig.setAttribute("src", "delete.png"); // "im" was undefined. You probably wanted to write "in", but it was wrong anyway 
     ig.setAttribute("onclick", "removeSpanElement('myForm','id_" + global_i + "')"); // the same 

     el.appendChild(ig); 
     el.appendChild(ig); 
     el.appendChild(br); 

     el.setAttribute("id", "id_" + global_i); 
     document.getElementById("myForm").appendChild(el); 
    } 

    function removeSpanElement(parentDiv, childDiv) 
    { 
     if (childDiv == parentDiv){ 
      return false; 
     } 
     else if (document.getElementById(childDiv)){ 
      var child = document.getElementById(childDiv); 
      var parent = document.getElementById(parentDiv); 
      parent.removeChild(child); 
      return true; 
     } 
     else{ 
      // Child div has already been removed or does not exist 
      return false; 
     }  
    } 

    /* This function only clears 1st span */ 
    function clearItems() 
    { 
     var remove = true; 
     var i = 1; 
     while(remove){ 
      remove = removeSpanElement("myForm","id_" + i); 
      i++; 
     } 
     global_i = 0; 
    } 
</script> 

Answer 3

<code> <form> 
    <input type='text' id='item' value=''/> 
    <input type="button" value="Add" onclick="addItem()"/> 
    <input type="button" value="Clear All" onclick="clearItems()"/> 
    <span id="myForm"></span> 
</form> 

<script> 

    var global_i = 0; // Set Global Variable i 

    function increment() 
    { 
     global_i += 1; // Function for automatic increment of field's "ID" attribute. 
    }  

    function addItem() 
    { 
     try{ 
      increment(); 
     var item = document.getElementById("item").value; 

     var br = document.createElement('BR'); 
     var in_e = document.createElement("INPUT"); 
     var ip_e = document.createElement("IMG"); 
     var el = document.createElement('SPAN'); 

     in_e.setAttribute("type", "text"); 
     in_e.setAttribute("value", item) 
     in_e.setAttribute("Name", "text_item_element_" + global_i); 
     in_e.setAttribute("id", "id_item_" + global_i); 
     in_e.setAttribute("style", "width:80px"); 

     ip_e.setAttribute("src", "delete.png"); 
     ip_e.setAttribute("onclick", "removeSpanElement('myForm','id_" + global_i + "')"); 

     el.appendChild(in_e); 
     el.appendChild(in_e); 
     el.appendChild(br); 

     el.setAttribute("id", "id_" + global_i); 
     document.getElementById("myForm").appendChild(el); 
     }catch(e){alert(e)} 

    } 

    function removeSpanElement(parentDiv, childDiv) 
    { 
     if (childDiv == parentDiv){ 
      return false; 
     } 
     else if (document.getElementById(childDiv)){ 
      var child = document.getElementById(childDiv); 
      var parent = document.getElementById(parentDiv); 
      parent.removeChild(child); 
      return true; 
     } 
     else{ 
      // Child div has already been removed or does not exist 
      return false; 
     }  
    } 

    /* This function only clears 1st span */ 
    function clearItems() 
    { 
     var remove = true; 
     var i = 1; 
     while(remove){ 
      remove = removeSpanElement("myForm","id_" + i); 
      i++; 
     } 
     global_i = 0; 
    } 

</script> 
</code>