Recursively add or remove class in a list jquery

Question

I have a list with checkboxes that can indefinitely grow, i.e:

<ul>
<li class="tailor-children">
    <input type="checkbox" class="tailorCheckbox" name="id" id="1_12" value="1_12" checked="">
    <label class="1_12" for="1_12">Animals</label>
    <ul>
        <li>
            <input type="checkbox" class="tailorCheckbox" name="id" id="2_1" value="2_1" checked="">
            <label class="2_1" for="2_1">Mammals</label>
            <ul>
                <li>
                    <input type="checkbox" class="tailorCheckbox" name="id" id="3_1" value="3_1" checked="">
                    <label class="3_1" for="3_1">Carnivores</label>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="checkbox" class="tailorCheckbox" name="id" id="3_2" value="3_2" checked="">
                    <label class="3_2" for="3_2">Rodents</label>
                </li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>
            <input type="checkbox" class="tailorCheckbox" name="id" id="2_2" value="2_2" checked="">
            <label class="2_2" for="2_2">Reptiles</label>
        </li>
    </ul>
</li>

I need a function to add or remove classes dynamically that would work no matter the size of the list. I only have a hardcoded solution that works but it is not recursive and it is a mess.

tailor.on('change', 'input[type="checkbox"]', function () {
        var checkbox = $(this);
        if (checkbox.prop('checked')) {
            checkbox.parent().find('label').removeClass("removedIcon");
            checkbox.parent().find('label').addClass("removeIcon");
            checkbox.prop('checked', true);
            checkbox.parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().children('input').prop('checked', true);
            checkbox.parent().parent().parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().parent().parent().children('input').prop('checked', true);
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('input').prop('checked', true);
        }
        else {
            checkbox.parent().find('label').removeClass("removeIcon");
            checkbox.parent().find('label').addClass("removedIcon");
            checkbox.parent().find('input').prop('checked', false);
            if (!checkbox.parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().children('input').prop('checked', false);
            }
            if (!checkbox.parent().parent().parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().parent().parent().children('input').prop('checked', false);
            }
            if (!checkbox.parent().parent().parent().parent().parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().parent().parent().parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('input').prop('checked', false);
            }
        }
    });

Can some one lead me in the right path please? Please help me to understand how to simplify this in a recursive and efficient way.

Thank you

Answer 1

Not sure what you are trying to achieve but i hope this code will do what you are aiming to do

Js fiddle

$(document).on('change', 'input[type="checkbox"]', function () {

        let checkbox = $(this);
        if (checkbox.prop('checked')) {
            checkbox.siblings('label').removeClass("removedIcon");
            checkbox.siblings('label').addClass("removeIcon");

            checkbox.parent('li').parents('li').each(function () {
                $(this).children(':checkbox').prop('checked', true);

                $(this).children(':checkbox').siblings('label').removeClass("removedIcon");
                $(this).children(':checkbox').siblings('label').addClass("removeIcon");
            });

        } else {
            checkbox.siblings('label').removeClass("removeIcon");
            checkbox.siblings('label').addClass("removedIcon");

            checkbox.parent('li').parents('li').each(function () {
                let childrenLength = $(this).children(':checkbox').length;
                if (childrenLength == 0) {
                    $(this).children(':checkbox').prop('checked', false);

                    $(this).children(':checkbox').siblings('label').removeClass("removeIcon");
                    $(this).children(':checkbox').siblings('label').addClass("removedIcon");
                }
            });

            checkbox.siblings('ul').each(function () {
                $(this).find(':checkbox').prop('checked', false);

                $(this).find(':checkbox').siblings('label').removeClass("removeIcon");
                $(this).find(':checkbox').siblings('label').addClass("removedIcon");
            });
        }
    });