Declare a JavaScript function which can hide the label of the calling HTML element

Question

HTML

LABEL1
LABEL2&l         


        

Answer 1

This hides the label of the corresponding input.

function focus() {
    var labels = document.getElementsByTagName('label');
    for(var i = 0; i < labels.length; i ++) {
        var attr = labels[i].getAttribute('for'); //or labels[i].htmlFor
        if(attr === this.id) {
            labels[i].style.visibility = 'hidden';
            //or labels[i].style.display = 'none';
        }
    }

}

document.getElementById('ABC').addEventListener('focus', focus);
document.getElementById('DEF').addEventListener('focus', focus);

JSFiddle

A jQuery solution:

$('input').on('focus', function() {
    $('label[for=' + this.id + ']').hide();  
});