Удаление iframe, DOM
 

Доброго времени суток!

Скажу сразу, изучать начал JS только на днях, так что не серчайте на меня.

Написал тут я скрипт который по клику на ссылку создаёт блоки, в одном из которых есть и блок с iframe. В песочнице и в отдельном HTML файле работает, а вот когда подключаю его на тестовый сайт он удаляет только блок с ссылкой на удаление, а сам блок с iframe не трогает.

Вот моё детище ):

<script>
		function doExec(val, num){	
			var block=document.createElement('div');
				block.className='head-youtube';
				block.id='head-youtube';
			var blockCont=document.createElement('div');
				blockCont.id="head-youtube-container";
				blockCont.className='head-youtube-container';
				block.appendChild(blockCont);
			var blockYouCont=document.createElement('div');
				blockYouCont.id='you_video';
				blockYouCont.style.cssFloat='left';
				blockCont.appendChild(blockYouCont);
			var iframe=document.createElement('iframe');
				iframe.id='iframe';
				iframe.width='609';
				iframe.height='370';
				iframe.src=val;
				blockYouCont.appendChild(iframe);
			var remove=document.createElement('div');
				remove.className='delete';
				remove.style.verticalAlign='top';
				remove.style.cssFloat='left';
				remove.innerHTML='<a onClick="remove();" href="#">Close</a>';
				blockCont.appendChild(remove);
			var name = 'youtube-container'+num;
			var obj=document.getElementById(name);
			obj.appendChild(block);
		}
		function remove() {
			var remove=document.getElementById("youtube-container1").removeChild(document.getElementById("youtube-container1").firstChild);
		}
    </script>

<div id="youtube-container1"></div>

    <div class=""> 
        <div id="">
            <div id="">
                <div class="" id="">    
    				<div class="" id="">
	    				<div class="" id="">
		    				<a class="youtube watch" onclick="doExec('http://www.youtube.com/embed/YeHQvmOtTPU?wmode=transparent&amp;hl=ru&amp;fs=1', '1');" href="#">WATCH VIDEO</a>
						</div>
                	</div>
              	</div>
          	</div>
      	</div>
	</div>

Подскажите пожалуйста, в какую сторону идти.

посмотри id элемента в какой добавляешь, и из какого удаляешь

Добавляю в:

<div id="youtube-container1"></div>

В итоге получается вот так:

<div id="youtube-container1">
	<div class="head-youtube" id="head-youtube">
    	<div id="head-youtube-container" class="head-youtube-container">
        	<div id="you_video" style="float: left; ">
            	<iframe id="iframe" width="609" height="370" src="http://www.youtube.com/embed/YeHQvmOtTPU?wmode=transparent&amp;hl=ru&amp;fs=1"></iframe>
            </div>
            <div class="delete" style="vertical-align: top; float: left; "><a onclick="remove();" href="#">Close</a></div>
        </div>
    </div>
</div>

Теперь надо бы удалить содержание

<div id="youtube-container1">...</div>

Я тут понял, что он не удаляет из-за подключённой библиотеки prototype.

Поменял

var remove=document.getElementById("youtube-container1").removeChild(document.getElementById("youtube-container1").firstChild);

на

$('head-youtube').remove();

Но результат всё тот же.

Не нравится прототипу?

Понял свою ошибку.

Название функции remove() конфликтовало (точнее выполнялось сразу) с библиотекой.