动态删除元素

时间:2013-05-29 18:10:34

标签: javascript html web-applications

我有JavaScript代码,允许我在飞行中添加更多输入值字段。

现在我想添加允许我delete字段或元素的功能。

    <html>
    <head>
        <script language="javascript">
            fields = 0;
            function addInput() {
                var con = document.getElementById('text');
                if(fields != 10)
                {
                    con.insertAdjacentHTML('beforeend', "<br></br>Study: <input type=\"text\" name=\"study[]\">Bug: <input type=\"text\" name=\"bug[]\"> BuildFile: <input type=\"text\" name=\"bname[]\" size=\"40\"> WAR File: <input type=\"text\" name=\"wname[]\" size=\"50\"><br />");

                    fields += 1;
                }
                else
                {
                    con.insertAdjacentHTML('beforeend', "<br />Only 10 instances allowed.");
                    document.form.add.disabled=true;
                }
            }
        </script>
    </head>
    <body>
    ...
...
<input type="button" onclick="addInput()" name="add" value="Add more Builds" />

修改

我已经尝试了以下它可以工作,但它删除了我要删除的所有元素只是最后一个或特定的一个。

function remove() {
  element = document.getElementById('text');
  element.parentNode.removeChild(element)

}

<input type="button" value="Remove Element" onClick="remove('parent','child');">

1 个答案:

答案 0 :(得分:1)

我建议您使用 jQuery 库来执行此操作。

function deleteAllInputs() {
    $('#text').find('input[type="text"]').each(function() {
        $(this).remove();
    })
}

请看这个示例,它可能对您有所帮助: http://jsfiddle.net/Bu4Jh/

您可以将元素包装到div中以一次性删除它们。