Remover y restaurar elementos con javascript

lucheano · 18 Oct 2016

Necesito que al cargar una pagina se muestren 4 videos de youtube en 4 divs distintos y que el usuario pueda eliminar o restaurar el video que se encuentra en el div correspondiente.
Me ayudaria mucho que me dejen el codigo en el tryit editor de Service Unavailable

aperpen · 22 Oct 2016

Con javascript solo:

HTML:

<div id="video1">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="document.getElementById('video1').style.display = 'none'">Remover video</button>
<button id="btn2" onclick="document.getElementById('video1').style.display = 'block'">Restaurar video</button>

<div id="video2">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="document.getElementById('video2').style.display = 'none'">Remover video</button>
<button id="btn2" onclick="document.getElementById('video2').style.display = 'block'">Restaurar video</button>

<div id="video3">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="document.getElementById('video3').style.display = 'none'">Remover video</button>
<button id="btn2" onclick="document.getElementById('video3').style.display = 'block'">Restaurar video</button>

<div id="video4">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="document.getElementById('video4').style.display = 'none'">Remover video</button>
<button id="btn2" onclick="document.getElementById('video4').style.display = 'block'">Restaurar video</button>

Demo: https://jsfiddle.net/hyxLt65k/

Con jQuery:

HTML:

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="video1">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="$('#video1').fadeOut()">Remover video</button>
<button id="btn2" onclick="$('#video1').fadeIn()">Restaurar video</button>

<div id="video2">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="$('#video2').fadeOut()">Remover video</button>
<button id="btn2" onclick="$('#video2').fadeIn()">Restaurar video</button>

<div id="video3">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="$('#video3').fadeOut()">Remover video</button>
<button id="btn2" onclick="$('#video3').fadeIn()">Restaurar video</button>

<div id="video4">
CODIGO YOUTUBE
</div>
<button id="btn1" onclick="$('#video4').fadeOut()">Remover video</button>
<button id="btn2" onclick="$('#video4').fadeIn()">Restaurar video</button>
</body>

Demo: https://jsfiddle.net/e0cm1h0b/

Te dejo las demos jsfiddle por que el de W3S no se muy bien como se comparte

Saludos

Remover y restaurar elementos con javascript

lucheano

aperpen