Question

我有以下代码将一个文件上传选项添加到div，并将删除添加的最后一个元素。

<script language="javascript" type="text/javascript">
    function add(type) {
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
        element.setAttribute("style", "width: 500px;");
        var newfile = document.getElementById("uploadhere");
        newfile.appendChild(element);           
    }
    function remove() {
        var newfile = document.getElementById("uploadhere");
        newfile.removeChild(newfile.lastChild);
    }

</script>

我试图找出一种方法来删除添加的特定元素，而不是仅仅以某种方式删除最后一个元素。或者甚至只是在创建的元素旁边有一个删除按钮。

编辑添加我的解决方案

这就是我解决问题的方法

<script language="javascript" type="text/javascript">
        var i = 0;
        function add(type) {            
            var element = document.createElement("input");
            element.setAttribute("type", type);
            element.setAttribute("value", type);
            element.setAttribute("name", type);
            element.setAttribute("style", "width: 500px;");
            element.setAttribute("id", "element-" + i);
            var removebutton = document.createElement("input");
            removebutton.type = "button";
            removebutton.value = "Remove";
            removebutton.setAttribute("id", "remove-" + i);
            removebutton.setAttribute("onclick", "remove(" + i + ")");
            var newfile = document.getElementById("uploadhere");
            newfile.appendChild(element);
            newfile.appendChild(removebutton);
            i++;                     
        }
        function remove(id) {            
            document.getElementById("uploadhere").removeChild(document.getElementById("element-" + id));            
            document.getElementById("uploadhere").removeChild(document.getElementById("remove-" + id));
        }

    </script>

Answer 1

试试这个：

<script language="javascript" type="text/javascript">
    var i = 1;
    function add(type) {
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
        element.setAttribute("style", "width: 500px;");
        element.setAttribute("id", "element-" + i++);
        var newfile = document.getElementById("uploadhere");
        newfile.appendChild(element);           
    }
    function remove(id) {
        document.getElementById("uploadhere").removeChild(document.getElementById("element-" + i));
    }

</script>

Answer 2

如你所说，一个选项是使用索引：

function remove(index)
{
  var newfile = document.getElementById("uploadhere");
  newFile.removeChild(newfile.childNodes[index])
}

并删除“添加”功能中的newfile.removeChild行

另一个选项，就像你说的那样，是使用一个按钮，从用户友好的角度来看，这可能更容易。我倾向于把所有东西都放在桌子上以使它更整洁：

<table>
  <tbody id="uploadhere">
  </tbody>
</table>

<script>
  var newfile = document.getElementById("uploadhere");

  function add(type) {
    var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
    element.setAttribute("style", "width: 500px;");

    // Create your button
    var button = document.createElement("button");
    button.onclick = "newfile.removeChild(this.parentNode.parentNode)";
    var text = document.createTextNode("Remove");
    button.appendChild(text);

    // Create a table row in which to put the data
    var row = newFile.insertRow(-1);

    // Create a table cell in which to put your "input" element
    var cell1 = row.insertCell(-1);
    cell1.appendChild(element);

    // Create a table cell in which to put your button
    var cell2 = row.insertCell(-1);
    cell2.appendChild(button);
  }
</script>

添加元素并删除已通过Javascript添加的特定元素

2 个答案: