通过在JavaScript中单击父母的兄弟项目来删除活动的班级

Question

I am working on a get a card script, that consists of 2 phases. Selecting a card > opens a relevant window on the right Pressing an Apply now button on that opened window > opens a relevant window on the bottom.

Right now everything works as intended, except: I want to make so that if a person removes a card selection (.gacca1 / .gacca2), it also removes the "activated" class from the "Get card" div (.gaccaiGET), thus removing the bottom div (.gara). Right now, it keeps the "Get a card" activated, even if you deactivate the card selector.

No matter how I try (with my beginner js skills), i can't make it work.

Also, if you look at the html and css, you will see that most of the elements are positioned absolute, which is a very bad way of making this work. Unfortunately, I could not figure a way to make the positions relative, because the

.divclass.active + .otherdivclass { css }

works only for brother elements, and, even, only for the brother elements that are next to each other. Which resulted in writing poor html and css, to make it look and work the way I want it to. If you have any tips on this matter, please let me know!

Thanks

http://jsfiddle.net/4XM9A/10/

(function () {
    var links = Array.prototype.slice.call(document.querySelectorAll('.gacca1'));
    var links2 = Array.prototype.slice.call(document.querySelectorAll('.gacca2'));
    var links3 = Array.prototype.slice.call(document.querySelectorAll('.gaccaiGET'));

    var toggleClass = function (className, element) {
        element.classList.toggle(className);
    };

    var clickHandler = function (linksToDisable) {
        return function () {
            toggleClass('active', this);
            linksToDisable.filter(function (link) {
                return link.classList.contains('active');
            })
            .forEach(function (link) {
                toggleClass('active', link);
            });

        };
    };

    links.forEach(function (link) {
        link.addEventListener('click', clickHandler(links2));
    });
    links2.forEach(function (link) {
        link.addEventListener('click', clickHandler(links));
    });
    links3.forEach(function (link) {
        link.addEventListener('click', function () {
            toggleClass('active', this);
        });
    });
}());

Answer 1

As far as I understand you should firstly toggle '.active' of all divs of the '.gaccai' that goes after the ".active" parent. Try changing function toggleClass a bit:

var toggleClass = function (className, element) {
        var array = document.querySelectorAll('.' + element.classList + ' + .gaccai .active');
        for (var i = 0; i < array.length; i++) {
            array[i].classList.toggle(className);
        }
        element.classList.toggle(className);
    };