Delete form fields using Javascript

Question

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.

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
– Marc, Commented May 16, 2013 at 11:32

ChrisH · Accepted Answer · 2013-05-16 11:49:06Z

3

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?

edited May 16, 2013 at 11:49

answered May 16, 2013 at 11:35

ChrisH

1,2811 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nnnnnn Over a year ago

Won't that give a reference error about $ not being defined?

Alex Over a year ago

Thx for your reply. I will have a try.

ChrisH Over a year ago

user1667419, please reload as i've added plain JavaScript instead of jQuery :) (nnnnn, you too haha)

Willem D'Haeseleer Over a year ago

that will loop over every input field in the page, not that pretty. some event binding would be nice to

ChrisH Over a year ago

Willem, the javascript #2 should be in a function, same as the jquery #1; if done it's in an event. It's not that pretty, that's true, but for reference it should be enough.

Alireza Mirian · Accepted Answer · 2013-05-16 11:43:13Z

1

With jquery:

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

answered May 16, 2013 at 11:43

Alireza Mirian

6,8623 gold badges32 silver badges50 bronze badges

2 Comments

ChrisH Over a year ago

Please note that this only works with jQuery library, not plain-text JavaScript :)

Alireza Mirian Over a year ago

Yeah you're right :) and that's why I added "With jquery" on top of my answer :D

Amit Sharma · Accepted Answer · 2013-05-16 11:39:16Z

0

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 .

answered May 16, 2013 at 11:39

Amit Sharma

1,2101 gold badge11 silver badges26 bronze badges

3 Comments

Willem D'Haeseleer Over a year ago

djeezes, is everyone here blind or what ? "when somebody does not fill in the field", read the question will you.

Amit Sharma Over a year ago

Willem D'haeseleer ofcourse conditions needs to be putted to check if the field is not filled by used thn call function to remove.

Willem D'Haeseleer Over a year ago

instead of putting that in a comment you should put it in your code

Marcio · Accepted Answer · 2013-05-16 11:43:52Z

0

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);
}

edited May 16, 2013 at 11:43

answered May 16, 2013 at 11:38

Marcio

2,12719 silver badges25 bronze badges

Collectives™ on Stack Overflow

Delete form fields using Javascript

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related