Is it possible to write a Javascript function to delete form a field when somebody does not fill in the field?

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

If somebody does not fill in question 2 for example, it deletes question 2 label and the field.

Is it possible to write a Javascript function to delete form a field when somebody does not fill in the field?

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

If somebody does not fill in question 2 for example, it deletes question 2 label and the field.

• javascript
• forms

• You mean, you do not want the form to be submitted but instead to have some fields deleted when the submit button is pressed? – Marc Commented May 16, 2013 at 11:32

4 Answers 4

For jQuery:

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

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

Something like this?

With jquery:

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

i am using folloing function to remove element from document.

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

You can pass a dom element or element Id itself to delete .

The following should do what you want :

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