Eliminar contenido de un div que tiene hijos creados

carmevigo · #1 (**permalink**) 15/11/2015, 07:02

HOla,

Estoy haciendo un ejercicio en el que tengo que hacer un formulario que al darle al boton crear me lo copie en un tab. Cuando lo copie tiene que borrarse el contenido del formulario.

Lo que me ocurre es que cuando lo borro se me borra todo el input type, no el contenido. Creo que tiene algo que ver con el hecho que el texto lo utilizo en el div que he creado, al tener hijos no puedo borrar el padre? pero si puedo borrar todo el input. He probado

innerHTML= "";
pero no me borra nada.

Os dejo el codigo, todovía no l

Código HTML:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilostabs.css" />
<title>Documento sin título</title>
<script>
var contador = 1;
function crear(){

var texto1 = document.getElementById("cajatexto").value;
var textoarea = document.getElementById("textoarea").value;

var midiv = document.createElement("div");
var midiv2 = document.createElement("div");

var contador = 1;

midiv.id = "midiv1";
midiv2.id ="midiv2";
midiv.innerHTML = texto1;

midiv2.innerHTML = textoarea;

  

var textoarea1 = document.getElementById("contenedor").appendChild(midiv);
var textoarea2 = document.getElementById("contenedor").appendChild(midiv2);

var parent = document.getElementById("formulario");
var child = document.getElementById("cajatexto");

parent.removeChild(child);

borrar();

	 

miEstilo();
	 
}

function borrar(){
	var btn = document.createElement("BUTTON");
    var textoboton = document.createTextNode("borrar");
	    
		btn.onclick = function(){
		var d = document.getElementById ("midiv1");
		var d2= document.getElementById ("midiv2");
	
		while ((d.hasChildNodes()) && (d2.hasChildNodes()))
		d.removeChild(d.firstChild);
		d2.removeChild(d2.firstChild);
		
 
    	   };
	   
		btn.id = "miboton";
		var botoneliminar = document.getElementById("contenedor").appendChild(btn);
		btn.appendChild (textoboton);
			
			
		}
		

		
			
		


function miEstilo(){
	
   var capa = document.getElementById("midiv1");
   var capaarea = document.getElementById ("midiv2");
   capa.style.display="inline-block";
 
   capa.style.float="left";
   capa.style.width="auto";
   capa.style.border="1px #000 solid"; 
   capa.style.backgroundColor="#66ff33"; 
 
   capa.style.margin="10px 50px 10px 0";
   capa.style.padding="10px 0px 10px 20px";
   
    capaarea.style.display="inline-block";
	  
	 capaarea.style.float="left";
	capaarea.style.width="240px";
    capaarea.style.backgroundColor="#66ff33";
	capaarea.style.border="1px #000 solid"; 
	 capaarea.style.margin="10px 10px 10px 0";
   capaarea.style.padding="10px 0px 10px 20px";

   
 
}
	/*

	

#boton1{
	display:block;
	clear:left;
    float:left;
	padding: 10px 0px 10px 20px;
	margin: 0 0 10px 0;
	}*/
	
</script>

</head>

<body>
<div id="contenedor">



		<div id="header">
		<ul class="nav">
						<li><a href="">Inicio</a></li>
						<li><a href="">Servicios</a></li>
						<li><a href="">Acerca de</a></li>
		</ul>				
		</div>
		
		
		<div id="formulario">
		<input type="text" name="cajatexto"  value= "" id="cajatexto" />
		<textarea name="comentarios" rows="10" cols="40" id="textoarea"></textarea>
		
		<input type="button" name="confirmar"  id= "boton1" value="crear" onclick="crear()" />
		</div>
</div>
</body>