Добавление или удаление класса к элементу динамически с помощью Mutation Observer

Question

Я хочу удалить класс из элемента, когда модальное всплывающее окно. Но когда я искал в Интернете, я обнаружил DOMNodeInserted , и он работал, пока не заработал, и я получил ошибку DOMNodeInserted устарело.
Ошибка, которую я продолжаю получать ниже введите описание изображения здесь

КОД РАБОТАЕТ НИЖЕ, но устарел.

    $(document).on('DOMNodeInserted', function(e) {
            if ( $("body").hasClass('modal-open') ) {
                $(".hide-search").hide();  
                // $(".nav-menu").addClass("border-0");
            } else if ($("body").hasClass('modal-open') === false){
                $(".hide-search").show(); 
                // $(".nav-menu").removeClass("border-0");
            }
        });

Новый код, который я хотел реализовать, но я не знаю, как это сделать.

let body = document.querySelector('body');
let observer = new MutationObserver(mutationRecords => {
            console.log(mutationRecords); // console.log(the changes)

            // observe everything except attributes
            observer.observe(body, {
            childList: true, // observe direct children
            subtree: true, // and lower descendants too
            characterDataOldValue: true // pass old data to callback
            });
             });
            }
            } 

Answer 1

Мне удалось решить вышеуказанную проблему с помощью этого решения.

 function myFunction(x) {
            if (x.matches) {
            var body = $("body");
            var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === "class") {
                var attributeValue = $(mutation.target).prop(mutation.attributeName);
                console.log("Class attribute changed to:", attributeValue);
                if(attributeValue == "ng-scope modal-open") {
                    $(".input-group").addClass("removeDisplay");  
                    $(".nav-menu").addClass("hide-nav-menu");
                } else {
                    $(".input-group").removeClass("removeDisplay");  
                    $(".nav-menu").removeClass("hide-nav-menu");
                }
                }
            });
            });
            observer.observe(body[0], {
            attributes: true
            });
            }
            } 
            // Wow It's working.
            var x = window.matchMedia("(max-width: 1240px)")
            myFunction(x) 
            x.addListener(myFunction)

Сначала я использовал соответствующий носитель, чтобы проверить, меньше ли размер экрана, чем 1240 пикселей, затем я использовал мутацию вместе с проверкой, является ли атрибуткласс присутствует, затем выполните некоторые определенные действия, основанные на этом.

Answer 2

• наблюдать () должно быть за пределами обратного вызова
• все, что вам нужно наблюдать, это атрибут class, больше ничего, поэтому нет необходимости в чрезвычайно дорогой subtree:true.
• class может включать в себя что-то еще, поэтому вам нужно игнорировать несущественные изменения

new MutationObserver((mutations, observer) => {
  const oldState = mutations[0].oldValue.split(/\s+/).includes('modal-open');
  const newState = document.body.classList.contains('modal-open');
  if (oldState === newState) return;
  if (newState) {
    $('.hide-search').hide();
  } else {
    $('.hide-search').show();
  }
}).observe(document.body, {
  attributes: true,
  attributeFilter: ['class'],
  attributeOldValue: true,
});