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

您使用的是保留关键字，并且您的变量未定义。我为你编辑了代码。将我的代码与你的代码进行比较，看看错误在哪里。

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

如何清除所有动态创建的SPAN元素

3 个答案: