Как добавлять и удалять элемент на страницу при уменьшении/ увеличении размеров экрана?

Question

[LoveCodeandCoffe]

Нужно немного перестроить разметку страницу, на маленьких разрешения средствами jquery. А именно при достижении определенного размера экрана добавлять элемент div

$(window).resize(function() {
  if ( $(window).width() < 1024 ) {
    $('#col_slider').append('<div class="col-xs-6" id="col_mobile-slider"></div>');
  }
  return false;
});

Мой код, ищет на странице элемент с id col_slider и добавляет

<div class="col-xs-6" id="col_mobile-slider"></div>

. Но он делает это постоянно при достижении ширины экрана <1024 . Как заставить функцию выполниться 1 раз и больше не выполняться?

Answer 1

[Web Dentist]

Используй media-запросы

Answer 2

[Bankir77]

Лучше такое делать через media запросы, но если очень нужно через JQuery, то вот рабочий пример:

$(window).resize(function() {
		// проверяем ширину и существует ли див #col_mobile-slider, тем самым тело условия выполнится один раз
		if ($(window).width() < 1024 && $("#col_mobile-slider").length == 0) {
			$('#col_slider').append('<div class="col-xs-6" id="col_mobile-slider">Текст!</div>');
		}
		// Откатываем изменения при увеличении ширины окна (если нужно)
		else if($(window).width() > 1024 && $("#col_mobile-slider").length == 1) {
			$("#col_mobile-slider").remove();
		}
		return false;
	});