javascript - 使用 Javascript 删除表单字段

Question

当有人没有填写字段时，是否可以编写一个 Javascript 函数来删除字段？

<form id="myform">
<label for="q1" id="q1label">question 1</label>
<input type="text" id="q1" name="q1"/>
<label for="q2" id="q2label">question 2</label>
<input type="text" id="q2" name="q2"/>
<label for="q3" id="q3label">question 3</label>
<input type="text" id="q3" name="q3"/>
<input type="submit" value="Delete blank fields" onclick="return checkanddelete"/>
</form>

例如，如果有人没有填写问题 2，它会删除问题 2 标签和字段。

Answer 1

对于 jQuery：

<script type="text/javascript">
function checkanddelete() {
    $('input').each(function(){
        if ($(this).val() == '') {
            var id = $(this).attr('id');
            $.remove('#' + id);
            $.remove('#' + id + 'label');
        }
    });
}
</script>

对于 JavaScript：

<script type="text/javascript">
function checkanddelete() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
{
    if (document.getElementsByTagName("input")[i].value.length == 0) {
        var id = document.getElementsByTagName("input")[i].id;
        (elem=document.getElementById(id)).parentNode.removeChild(elem);
        (elem=document.getElementById(id + 'label')).parentNode.removeChild(elem)
    }
}
}
</script>

像这样的东西？

Answer 2

使用 jquery：

$("#myform :text").each(function(){
    if( !$.trim($(this).val()) )
        $(this).prev('label').andSelf().remove();
});

Answer 3

以下应该做你想要的：

var inputToDelete = document.getElementById("q2");
if (inputToDelete.value == "") {
   var labelToDelete = document.getElementById("q2label");
   var parentNode = document.getElementById("myform");
   parentNode.removeChild(labelToDelete);
   parentNode.removeChild(inputToDelete);
}

Answer 4

我正在使用以下功能从文档中删除元素。

function removeElement(id)
{
    if(typeof id === "object")
        return id.parentNode.removeChild(id);
    else
        return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

您可以将 dom 元素或元素 Id 本身传递给 delete 。