Как сделать, чтобы корректно удалялся виждет ВК при клике на кнопку?

Question

[toyvo_glumov]

Здравствуйте, только пытаюсь практиковать JS, нужна помощь. Мне нужно, чтобы при клике на кнопку загружался виджет опроса вконтакта, а при повторном клике он убирался (для этого условие, проверяющее высоту блока (опять же не уверен так ли это реализовывается вообще)). Скрипт срабатывает, но при третьем нажатии на кнопку виджет загружается опять и получается несколько айфреймов виждета в блоке vk_poll. Как сделать, чтобы они не плодились?

<button id="poll-button">Кнопка</button>
<div id="poll-container"></div>
<div id="vk_poll"></div>

<script>
var cont = document.getElementById('poll-container');
var knopka = document.getElementById('poll-button');
var vidjet = document.getElementById('vk_poll');

knopka.onclick = function() { 
 if (cont.offsetHeight === 0) { 
  cont.appendChild(vidjet);
  VK.Widgets.Poll("vk_poll", {width: "300"}, "245434324_4a7f33a2a9a111fe8d");}
  else {cont.removeChild(vidjet);}
}
</script>

Answer 1

[Cyber_bober]

А зачем вы его добавляете/удаляете? можно скрыть/показать poll-container инциализировав виджет опроса 1 раз.

<button id="poll-button">Кнопка</button>
<div id="poll-container" class="hide"></div>
<div id="vk_poll"></div>

.hide{
   display:none;
}

var cont = document.getElementById('poll-container');
var knopka = document.getElementById('poll-button');
var vidjet = document.getElementById('vk_poll');
cont.appendChild(vidjet);
  VK.Widgets.Poll("vk_poll", {width: "300"}, "245434324_4a7f33a2a9a111fe8d");

knopka.onclick = function() { 
 cont.classList.toggle('hide');
}

Comments

[toyvo_glumov]

Планируется, что на одной странице таких виджетов разных будет много, поэтому я и хочу чтобы они только по клику вызывались (только нужный), а не грузились все сразу.