Вызов первой функции скрипта в последней для создания цикла

У меня есть скрипт, который при нажатии на кнопку удаляет стили, скрывающие несколько div и добавляет новую кнопку, которая при нажатии возвращает стили. Нужно сделать бесконечный цикл, который при нажатии на одну кнопку будет выполнять ее действие, удалять кнопку и добавлять другую. Сам скрипт написан, но проблема в том, что мне нужно вызвать первую функцию в последней, но выбивает ошибку Uncaught TypeError: Cannot read property 'remove' of null.

Скрипт:

Расширенный Фильтр

<script>
function deleteStyles() {
  let myobj = document.getElementById("style-mobile");
  myobj.remove();
  let mybutton = document.getElementById("style-mobile-button");
  mybutton.remove();
  jQuery(document).ready(function($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='addStyles()' id='style-mobile-button1' class='button stm-multiple-extend'><span>Убрать</span></a>" );
}); 
};
function addStyles(){
jQuery(document).ready(function show($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple-extend'><span>Розширений фільтр</span></a>" );
});
var status=document.getElementsByClassName('stm-filter_status');
for(var i=0; i<status.length; i++)status[i].style.display='none';
var ca_year=document.getElementsByClassName('stm-filter_ca-year');
for(var i=0; i<ca_year.length; i++)ca_year[i].style.display='none';
var fuel=document.getElementsByClassName('stm-filter_fuel');
for(var i=0; i<fuel.length; i++)fuel[i].style.display='none';
var body=document.getElementsByClassName('stm-filter_body');
for(var i=0; i<body.length; i++)body[i].style.display='none';
var transmission=document.getElementsByClassName('stm-filter_transmission');
for(var i=0; i<transmission.length; i++)transmission[i].style.display='none';
var price=document.getElementsByClassName('filter-price');
for(var i=0; i<price.length; i++)price[i].style.display='none';
var co2=document.getElementsByClassName('stm-filter_co2');
for(var i=0; i<co2.length; i++)co2[i].style.display='none';
var select=document.getElementsByClassName('stm-multiple-select');
for(var i=0; i<select.length; i++)select[i].style.display='none';
let mybutton1 = document.getElementById("style-mobile-button1");
mybutton1.remove();

};
</script>

Вызов первой функции должен быть после mybutton1.remove();


Ответы (1 шт):

Автор решения: Sasha Sasha

Рабочий скрипт:

<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple- 
 extend'> 
<span>Расширенный Фильтр</span></a> <br>
<script>

function deleteStyles() {
  let myobj = document.getElementById("style-mobile");
  myobj.remove();
  let mybutton = document.getElementById("style-mobile-button");
  mybutton.remove();
  jQuery(document).ready(function($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='addStyles()' id='style-mobile-button1' class='button stm-multiple-extend'><span>Убрать</span></a>" );
}); 

};
function addStyles(){
jQuery(document).ready(function show($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple-extend'><span>Расширенный Фильтр</span></a>" );
});
    $( ".sidebar-entry-header" ).after( "<style id='style-mobile'>@media (max-width: 426px){    .stm-filter_status{display:none}    .stm-filter_ca-year{display:none}   .stm-filter_fuel{display:none}  .stm-filter_body{display:none}  .stm-filter_transmission{display:none}  .filter-price{display:none} .stm-filter_co2{display:none}   .stm-multiple-select{display:none}} </style>" );
document.getElementById("style-mobile-button1").remove();
};
</script>
→ Ссылка