eliminar elementos DOM

juan_14nob · #1 (**permalink**) 31/03/2011, 16:28

Hola, lo que hago es crear elementos con DOM, osea un formulario dinamico, con un boton que me agrega elementos y otro boton que elimina, y otro boton que elimina todos los que alla creado, pero no funcionan correctamente aqui les dejo el codigo:

Código HTML:

<html>
<head>
<style type="text/css">
p{
width:100px;
margin:0px;
display:inline;
padding:0px;
}

</style>

<script type="text/javascript">
var cantidad = 0;
function agregamos(){


  cantidad++;
  	var elemento=document.createElement('p');
	var texto=document.createTextNode('Opcion' + ' ' +cantidad+ ':');
	elemento.appendChild(texto);
	var obj=document.getElementById('opciones');
	obj.appendChild(elemento);
  var nuevohijo = document.createElement('input');
  nuevohijo.type = 'text';
  nuevohijo.name = 'opcion[]';
  nuevohijo.id = 'nombre' + cantidad;
  document.getElementById('opciones').appendChild(nuevohijo);
  document.getElementById('opciones').appendChild(document.createElement('br'));

}
function eliminarultimo()
{
  var puntero=document.getElementById("opciones");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);
    puntero.removeChild(puntero.childNodes[0]);

}
function eliminartotal()
{
var i;
var j;
  
  var puntero=document.getElementById("opciones");
  
  var espacioabajo=puntero.getElementsByTagName("br");
  for(i=0;i<puntero.childNodes.length;i++) 
  {
      for(j=0;j<espacioabajo.length;j++) 
  {

    puntero.removeChild(puntero.childNodes[j]);
  
  } 

    puntero.removeChild(puntero.childNodes[i]);
    puntero.removeChild(puntero.childNodes[i]);
  }

  cantidad = 0;
}

</script>
</head>
<body>
<h1 title="vamosarriba">Agregue elementos para la encuesta </h1>
<form action="encuesta_final.php" method="post" id="fs">

<input type="button" onclick="agregamos()" value="+">
<input type="button" onclick="eliminarultimo()" value="-">->
<input type="button" onclick="eliminartotal()" value="all">
</form>
<form action="#" method="post">
Titulo de la encuesta: <input type="text" name="titulo">
<div id="opciones"></div>
<input type="submit" value="Enviar" name="enviar">
<input type="reset" value="Borrar" name="reset">
</form>

</body>
</html>

deywibkiss · #2 (**permalink**) 14/06/2012, 22:01

que es opcion[]? un arreglo vacio?

si es un arreglo vacio entonces

queda mejjor asi:

function agregamos(){

var opcion = new Array();
cantidad++;
var elemento=document.createElement('p');
var texto=document.createTextNode('Opcion ' +cantidad+ ':');
elemento.appendChild(texto);
var obj=document.getElementById('opciones');
obj.appendChild(elemento);
var nuevohijo = document.createElement('input');
nuevohijo.setAttribute = ('type','text');
nuevohijo.setAttribute = ('name',opcion);
nuevohijo.setAttribute = ('id',opcion + cantidad);
document.getElementById('opciones').appendChild(nu evohijo);
document.getElementById('opciones').appendChild(do cument.createElement('br'));

}

para eliminar el ultimo

function eliminarultimo()
{
var puntero=document.getElementById("opciones");

ultimo = puntero.lastChild;

puntero.removeChild(ultimo);

}

para eliminar todo:

function eliminartotal()
{

var puntero=document.getElementById("opciones");

var espacioabajo=puntero.getElementsByTagName("br");
for(var i=0;i<puntero.childNodes.length;i++)
{
eliminado = puntero.childNodes[i];
puntero.removeChild(eliminado);

}

cantidad = 0;
}

dontexplain · #3 (**permalink**) 14/06/2012, 22:26

Veamos, para manejar el DOM

document.getElementById() para traer un elemento por el ID

document.getElementsByName para traer por nombre

document.getElementsByClassName para traer por clase

document.getElementsByTagName para traer por etiqueta

elemento.parentNode() para traer el nodo padre

elemento.ChildNodes[i] para traer el array de nodos hijos

elemento.removeChild(elementohijo) para eliminar un hijo

elemento.appendChild() para añadir un nodo a un elemento

document.createElement(etiqueta) para crear un nodo

elemento.insertBefore(elementoreferencia) para añadir antes del elemento de referencia un nodo creado

[...]

En pocas líneas, es lo preferente para manejar el DOM desde JS.

Si tienes un error es cosa de que lo revises tu mismo.

Un saludo.