SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: nicoalv1984 en Lunes 20 de Diciembre de 2010, 17:32

Título: quitar atributo de viñetas de tipo lista
Publicado por: nicoalv1984 en Lunes 20 de Diciembre de 2010, 17:32
HOla Expertos tengo la siguiente page q esta abajo del mensaje : y  me encuentro con un problema quiero eliminar el atributo de lista con un evento algo parecido a este  La idea es no usar innerhtml para esta ocacion.
es decir se carga la pagina con las listas :
.1
.2
.3
.4
y al precionar el evento saque las lista y quede 1 2 3 4

<html>
<body>
<script language="JavaScript">
function eliminarAtributo()
{
//probe de varias forma pero no sale
 // var puntero=document.getElementById('myList');
  //puntero.removeAttribute('li');
 
 
// var puntero=document.getElementById('myList');
  //puntero.removeAttribute('ul');
//asi
  //puntero=document.getElementById('myList');
  //puntero.removeAttribute('li');

var obj=document.getElementById("myList");
  var lista=obj.getElementsByTagName('li');
//puntero.removeAttribute('ul');
 lista.removeAttribute('li');
}
   
</script>
<div id="myList">
<ul>
<li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   </ul>
</div>

<input type="button" value="eliminar atributo lista" onClick="eliminarAtributo()">
</body>
</html>
Título: Re: quitar atributo de viñetas de tipo lista
Publicado por: fonsi3 en Lunes 20 de Diciembre de 2010, 18:19
Es que attributo es eso un attributo! No puedes eliminar un <li> mediante removeAttribute(), ya que un <li> como todo tag HTML es un nodo/elemento dentro del DOM. Un atributo es un caracteristica del tal nodo, por ejemplo <ul> tiene como attributo un "id", como tambien puede ser un "class", "name" inclusivo algo custom como "automovil" es 100% legal.

Los atributos se declaran en el mismo tag, por ejemplo <p>, le agrego los siguientes attributos,
Código: Text
  1. <p class="para" lang="es" title="Esto es un parrafo">...</p>
  2.  
, los attribuos son "class", "lang" y "title".

Ahora en tu caso para borrar elementos, debes utilzar la funcion removeChild(), cual siempre debe ser llamada en el parent, por ejemplo:

Código: Text
  1. <ul id="myList">
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5. </ul>
  6.  

Aca el parent es el <ul>, osea debes hacer los siguiente:

Código: Text
  1. // aca obtengo el parent
  2. var myList = document.getElementById( 'myList' );
  3. // y aca todos sus childs
  4. var items = myList.getElementsByTagName( 'li' );
  5. // ahora quiero borrar el ultimo li, recuerda getElementsByTagName
  6. // devuelve un array, cual posee una propiedad llamada length
  7. // esta propiedad me indica cuanto li he obtenido mas 1,
  8. // osea que por ejemplo en el ejemplo de arriba length es igual 3,
  9. // cuando en realidad es igual 2, recuerda todo array empieza a contar de 0
  10. // sabiendo esto para borrar en el ultimo li, yo se que es length - 1
  11. var lastItemPosition = items.length - 1;
  12. // con la posicion del ultimo elemento obtengo el utlimo <li>
  13. // recuerda que para acceder a un posicion especifica en un array usas los []
  14. var lastItemElem = items[lastItemPosition];
  15. // proceso a eliminar el utlimo elemento
  16. myList.removeChild( lastItemElem );
  17.  

Hago la distincion del parent, porque no puedo hacer algo como: li.removeChild( li ), no puedo borrar un elemento estando en el mismo elemento, para solucionar esto simplemente teniendo ubicado el li a borrar, simplemente subo de nivel, recuerda que el DOM es como un grafo en donde puedes moverte para arriba/abajo y izquierda/derecha, entoces otra forma de borrar un elemento, seria asi:
Código: Text
  1.  
  2. var lastItemElem = items[lastItemPosition];
  3. // proceso a eliminar el utlimo elemento
  4. lastItemElem.parentNode.removeChild( lastItemElem );
  5.  

Al usar parentNode ya no estyo en lastItemElem, estoy en el <ul>, el parent de ese <li>, osea he subido de nivel y luego simplemente borro el respectivo child.
Título: Re: quitar atributo de viñetas de tipo lista
Publicado por: nicoalv1984 en Lunes 20 de Diciembre de 2010, 18:53
Ok Experto muchisimas pero muchisimas gracias por su respuesta.
Saludos Cordiales.