In my application, I check if the user's browser is HTML5-capable and is able to display placeholders in input fields (using Modernizr). If so, I want to remove all labels from the HTML document in an automatized way, but I really don't know how.

In layman terms, if the user's browser supports placeholders I'd like to turn this:

<label for="email">
  Email:
</label>
<input type="email" id="email" placeholder="Your email">

Into this -in every occurrence-:

<input type="email" id="email" placeholder="Your email">

All I have is:

if (Modernizr.input.placeholder) {
  // Remove all labels from the HTML document
}

Until now I assigned ids to the labels and removed them one by one, but I'd like a more efficient way to do it.

In my application, I check if the user's browser is HTML5-capable and is able to display placeholders in input fields (using Modernizr). If so, I want to remove all labels from the HTML document in an automatized way, but I really don't know how.

In layman terms, if the user's browser supports placeholders I'd like to turn this:

<label for="email">
  Email:
</label>
<input type="email" id="email" placeholder="Your email">

Into this -in every occurrence-:

<input type="email" id="email" placeholder="Your email">

All I have is:

if (Modernizr.input.placeholder) {
  // Remove all labels from the HTML document
}

Until now I assigned ids to the labels and removed them one by one, but I'd like a more efficient way to do it.

• javascript
• html
• modernizr

Share Improve this question Follow edited Oct 8, 2014 at 13:45 geotheory 23.7k2929 gold badges126126 silver badges202202 bronze badges asked Mar 25, 2012 at 20:54 federicotfedericot 12.3k1919 gold badges6969 silver badges111111 bronze badges 6

• 10 Don't do that! From the specification "The placeholder attribute should not be used as an alternative to a label." Removing the label will mean that people can't check they put the right value in the right field (especially if it was put there by auto-plete) and will make it extremely difficult or impossible for anybody using a screen reader to know what they are supposed to enter into the field. (A good placeholder for your example would be "[email protected]" not "Your email".) – Quentin Commented Mar 25, 2012 at 20:57
• @Quentin. That should be an answer. I'd upvote that answer – Ben Commented Mar 25, 2012 at 21:06
• 1 @Ben — While I think it is good advice, it doesn't answer the question. – Quentin Commented Mar 25, 2012 at 21:07
• @Quentin Oh I didn't know that... Thanks for pointing it out. But then, aren't placeholders a bit redundant? Or their purpose is to show an example of the expected input? – federicot Commented Mar 25, 2012 at 21:10
• 1 Quoting from the specification again: "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format" – Quentin Commented Mar 25, 2012 at 21:11

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

First, build a table of the existing labels like so:

var labels = {}, tags = document.getElementsByTagName('label'), l = tags.length, i;
for( i=0; i<l; i++) labels[tags[i].getAttribute("for")] = tags[i];

Next, find input elements that have placeholders. For those that do, and have IDs, look for and remove the relevant label.

tags = document.getElementsByTagName('input');
l = tags.length;
var lb;
for( i=0; i<l; i++) {
    if( !tags[i].getAttribute("placeholder")) continue;
    if( lb = labels[tags[i].id]) lb.parentNode.removeChild(lb);
}

Done! No jQuery required!! (because it is actually possible to do stuff in raw JS...)

If you are OK with using jQuery, this is an one-liner:

$('label').remove();

Example here - unment the one line in the JavaScript part to see the effect:

• http://jsfiddle/t42qs/

Couldn't find any relevant questions for me to post this answer that might help. If someone is looking to remove a label for specific, via jquery:

<label for="billing_wooccm15" class="">Snacks&nbsp;<abbr class="required" title="required">*</abbr></label>


$('label[for="billing_wooccm14"]').css({
'margin-top': '-15px',
'padding' : '0'
});