Создание, удаление элемента (jquery) при различной ширине экрана?

Question

[Erosanteros]

Есть код

var containersRemoved = false;

			function windowSize(){
			  if (window.matchMedia("(min-width: 700px)").matches) {
			    if(containersRemoved){
			      appendElements();
			      containersRemoved = false;
			    }
			  }else{
			     if(!containersRemoved){
			       emptyContainers();
			       containersRemoved = true;
			     }
			  }   
			};

			function appendElements() {
			  jQuery("#bg_container").append("\
			    <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
			      <img src='img/bg/bg1.png'/>\
			    </div>\ ");
			};

			function emptyContainers() {
			  jQuery("#bg_container").empty();
			};
			
			$(window).resize(windowSize); // при изменении размеров
			$(window).load(windowSize); // при загрузке

Изначально #bg_container заполнен. При ресайзе код срабатывает и элемент удаляется и создаётся. При рефреше страницы, когда экран меньше 700px блок#bg-container опустошен(срабатывает правило else), но при рефреше страницы,когда экран больше 700px содержимое контейнера #bg_container остаётся изначальным(не изменяется). Причины, в силу которых правило else срабатывает а if нет, кто-нибудь подскажите.

Comments

[Алексей Самсонов]

а какую логику поведения вы вообще хотите реализовать?

[Erosanteros]

При ширине браузера более 700px добавляется элемент, при ширине менее он удаляется...