Как создать и удалить элемент с помощью jQuery?

278

13 апреля 2017, 18:44

Добрый день! Есть скрипт выдвижной панели. В файле стиля есть элемент (подложка), который в html код не добавлен. Возможно ли сделать так, чтобы скрипт при активации панели создавал этот элемент, а при закрытии панели удалял его? При добавлении $('.sidebar').appendTo('<div id="sidebar_bg"></div>'); элемент создается, но при закрытии панели не удаляется. Благодарю!

$(function(){ 
  $('.sidebar_icon').click(function(e){ 
    e.preventDefault(); 
    $('.sidebar').toggleClass('sidebar_toggled'); 
  }); 
});

.sidebar_bg { 
	display: block; 
	position: fixed; 
	background: rgba(0, 0, 0, 0.5); 
	top: 30px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 99; 
} 
.sidebar { 
	position: absolute; 
	top: 0; 
	left: -300px; 
	width: 300px; 
  height: 100%; 
  background: red; 
	-webkit-transition:all 200ms ease-in; 
	-moz-transition:all 200ms ease-in; 
	-ms-transition:all 200ms ease-in; 
	-o-transition:all 200ms ease-in; 
	transition:all 200ms ease-in; 
	z-index: 100; 
} 
.sidebar_toggled { left: 0; } 
.sidebar_icon { 
position: fixed; 
top: 0; 
right: 0; 
width: 50px; 
height: 50px; 
background: blue; 
z-index: 101; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sidebar"></div> 
<div class="sidebar_icon"></div>

Answer 1

$('#sidebar_bg').remove(); - удалить элемент

$(function(){ 
  $('.sidebar_icon').click(function(e){ 
    e.preventDefault(); 
    if ($('#sidebar_bg').length == 0) { 
      $('.sidebar').append('<div id="sidebar_bg"></div>'); 
    } else { 
      $('#sidebar_bg').remove(); 
    } 
    $('.sidebar').toggleClass('sidebar_toggled'); 
  }); 
});

#sidebar_bg { 
	display: block; 
	position: fixed; 
	background: rgba(0, 0, 0, 0.5); 
	top: 30px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 99; 
} 
.sidebar { 
	position: absolute; 
	top: 0; 
	left: -300px; 
	width: 300px; 
  height: 100%; 
  background: red; 
	-webkit-transition:all 200ms ease-in; 
	-moz-transition:all 200ms ease-in; 
	-ms-transition:all 200ms ease-in; 
	-o-transition:all 200ms ease-in; 
	transition:all 200ms ease-in; 
	z-index: 100; 
} 
.sidebar_toggled { left: 0; } 
.sidebar_icon { 
position: fixed; 
top: 0; 
right: 0; 
width: 50px; 
height: 50px; 
background: blue; 
z-index: 101; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sidebar"></div> 
<div class="sidebar_icon"></div>

Answer 2

Нужно добавить проверку в конце события на наличие класса , и в случае если он есть , удалять все дивы из "sidebar"

if ($('.sidebar').hasClass('sidebar_toggled')) {
   $('.sidebar div').remove();
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Физика игры. Соударение шаров

Задача - сделать на canvas шарики, чтобы они бесконечно двигались, бились друг об другаЯ это сделал, но это не вполне реалистично

233

javascript

Как реализовать метод split() (аналог String.split) для класса Uint8Array?

У меня есть массив Uint8Array с бинарными данными в формате

169

javascript

Найти каналы rgb из цвета HEX формата

Банальнейший вопрос, но я пока не знаю ответа

170

javascript

Steam: обход мобильного подтверждения (escrow)

Здравствуйте, помогите пожалуйста реализовать правильный гет запрос для мобильного подтверждения трейда в стимеЮзаю steam-totp для генерации...

412