Question

How can i loop through all label elements in a div using jQuery or just a JavaScript DOM

Here is the example html:

<div id="pagination">
    <label class="noLink">First</label>
    <label class="noLink">Previous</label>
    <label class="withLink" onClick="paginateTo('next')">Next</label>
    <label class="withLink" onClick="paginateTo('last')">Last</label>
</div>

What I’m trying to do here is to remove the onClick event and change class with value of withLink to noLink. I’m trying to loop all that label using JavaScript DOM and also with jQuery but still no luck. I know there is a similar question with this but can’t find one that suits my needs. Please help me with this. Thanks!

Answer 1

Very trivial with jQuery. Looks like:

$('#pagination .withLink').toggleClass('withLink noLink').removeAttr('onclick');

Reference: .toggleClass(), removeAttr()

---

Slighty trivial with vanilla Javascript:

var lnks = document.getElementById('pagination').querySelectorAll('.withLink');
for(var i = 0, len = lnks.length; i < len; i++) {
    lnks[i].removeAttribute('onClick');
    lnks[i].className = lnks[i].className.split(/\s/).filter(function(elem) {
        return elem !== 'withLink';
    }).join(' ');
}

Reference: .querySelectorAll(), .filter()

^{Be aware that the vanilla Javascript still has Browser restrictions. It requires Javascript 1.6 so you would need IE8+ for instance.}