jomasero/textareaDinamico.html

## textareaDinamico.html
<!DOCTYPE html>
<html>
	<head>
		<title>TextArea dinamico</title>
		<style>
			#seccionObservaciones
			{
				margin: 5px;
				border: 1px solid #ddd;
				padding: 5px;
				float: right;
			}
			#cuadroObservaciones
			{
				padding: 3px;
			}
			.observacion > textarea
			{
				width: 400px;
				height: 50px;
				margin: 1px;
				resize: vertical;
			}
			.botonX
			{
				vertical-align: top;
				margin: 1px;
			}
			#botonAgregaObservacion
			{
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="seccionObservaciones">
			<label>Agregue observaciones para la actividad aquí.</label>
			<div id="cuadroObservaciones">
				<div id="obs_1" class="observacion">
					<textarea>Hola textarea!!!</textarea>
					<button class="botonX" onclick="eliminaObs('obs_1')">X</button>
				</div>
			</div>
			<button id="botonAgregaObservacion" onclick="agregaObs()">Agregar</button>
		</div>
		<script type="text/javascript">
			var cont = 2;
			function agregaObs()
			{
				var nuevoTextArea = document.createElement("textarea");
				nuevoTextArea.innerHTML = "Este es la observación #" + cont;

				var nuevoBotonEliminar = document.createElement("button");
				nuevoBotonEliminar.className = "botonX";
				crearEvento(nuevoBotonEliminar, "click", function(){ eliminaObs(this.parentNode.id); });
				nuevoBotonEliminar.onclick="eliminaObs(" + cont + ")";
				nuevoBotonEliminar.innerHTML="X";

				var nuevaObs = document.createElement("div");
				nuevaObs.id = "obs_" + cont++;
				nuevaObs.className = "observacion";
				nuevaObs.appendChild(nuevoTextArea);
				nuevaObs.appendChild(nuevoBotonEliminar);

				var cuadroObs = document.getElementById("cuadroObservaciones");
				cuadroObs.appendChild(nuevaObs);
			}
			function eliminaObs(idObs)
			{
				observacion = document.getElementById(idObs);
				if (!observacion)
					alert("El elemento selecionado no existe");
				else
				{
					var cuadroObs = document.getElementById("cuadroObservaciones");
					cuadroObs.removeChild(observacion);
				}
			}
			//Funcion para agregar eventos a elementos de forma dinamica en IE y lo demas
			function crearEvento(elemento, evento, funcion)
			{
				if (elemento.addEventListener)
					elemento.addEventListener(evento, funcion, false);
				else
					elemento.attachEvent("on" + evento, funcion);
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>TextArea dinamico</title>
	<style>
	#seccionObservaciones
	{
	margin: 5px;
	border: 1px solid #ddd;
	padding: 5px;
	float: right;
	}
	#cuadroObservaciones
	{
	padding: 3px;
	}
	.observacion > textarea
	{
	width: 400px;
	height: 50px;
	margin: 1px;
	resize: vertical;
	}
	.botonX
	{
	vertical-align: top;
	margin: 1px;
	}
	#botonAgregaObservacion
	{
	float: right;
	}
	</style>
	</head>
	<body>
	<div id="seccionObservaciones">
	<label>Agregue observaciones para la actividad aquí.</label>
	<div id="cuadroObservaciones">
	<div id="obs_1" class="observacion">
	<textarea>Hola textarea!!!</textarea>
	<button class="botonX" onclick="eliminaObs('obs_1')">X</button>
	</div>
	</div>
	<button id="botonAgregaObservacion" onclick="agregaObs()">Agregar</button>
	</div>
	<script type="text/javascript">
	var cont = 2;
	function agregaObs()
	{
	var nuevoTextArea = document.createElement("textarea");
	nuevoTextArea.innerHTML = "Este es la observación #" + cont;

	var nuevoBotonEliminar = document.createElement("button");
	nuevoBotonEliminar.className = "botonX";
	crearEvento(nuevoBotonEliminar, "click", function(){ eliminaObs(this.parentNode.id); });
	nuevoBotonEliminar.onclick="eliminaObs(" + cont + ")";
	nuevoBotonEliminar.innerHTML="X";

	var nuevaObs = document.createElement("div");
	nuevaObs.id = "obs_" + cont++;
	nuevaObs.className = "observacion";
	nuevaObs.appendChild(nuevoTextArea);
	nuevaObs.appendChild(nuevoBotonEliminar);

	var cuadroObs = document.getElementById("cuadroObservaciones");
	cuadroObs.appendChild(nuevaObs);
	}
	function eliminaObs(idObs)
	{
	observacion = document.getElementById(idObs);
	if (!observacion)
	alert("El elemento selecionado no existe");
	else
	{
	var cuadroObs = document.getElementById("cuadroObservaciones");
	cuadroObs.removeChild(observacion);
	}
	}
	//Funcion para agregar eventos a elementos de forma dinamica en IE y lo demas
	function crearEvento(elemento, evento, funcion)
	{
	if (elemento.addEventListener)
	elemento.addEventListener(evento, funcion, false);
	else
	elemento.attachEvent("on" + evento, funcion);
	}
	</script>
	</body>
	</html>