Question

I’m having a small issue where I’m unable to remove the selected class from the group of ‘blocks’. As I click on each tab X it should clear the ‘selected’ class on any ‘block’ elements and apply then apply the ‘selected’ class to the parentNode of the tab that was clicked.

I keep getting the error, “Uncaught TypeError: Cannot call method ‘remove’ of undefined”. Here’s an example in jsfiddle http://jsfiddle.net/kas187/r4HLd/1/

Answer 1

Try:

window.addEventListener('DOMContentLoaded', function() {
    Array.prototype.slice.call(document.querySelectorAll('.block .tab')).forEach(function (el) {
        el.addEventListener('click', function() {
            document.querySelector('.block.selected').classList.remove('selected');
            this.parentNode.classList.add('selected');
        }, false);
    });
}, false);​

demo: http://jsfiddle.net/QGZvN/3/

or this, if you don’t like the slice-method:

// inside the for-block
tabbedblocks[i].querySelector('.tab').addEventListener('click', function() {
  document.querySelector('.block.selected').classList.remove('selected');
  this.parentNode.classList.add('selected');
}, false);