Programación Web y Scripting > JavaScript
quitar atributo de viñetas de tipo lista
(1/1)
nicoalv1984:
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>
fonsi3:
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 ---<p class="para" lang="es" title="Esto es un parrafo">...</p> , 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 ---<ul id="myList"> <li>1</li> <li>2</li> <li>3</li></ul>
Aca el parent es el <ul>, osea debes hacer los siguiente:
--- Código: Text ---// aca obtengo el parentvar myList = document.getElementById( 'myList' );// y aca todos sus childsvar items = myList.getElementsByTagName( 'li' );// ahora quiero borrar el ultimo li, recuerda getElementsByTagName// devuelve un array, cual posee una propiedad llamada length// esta propiedad me indica cuanto li he obtenido mas 1,// osea que por ejemplo en el ejemplo de arriba length es igual 3,// cuando en realidad es igual 2, recuerda todo array empieza a contar de 0// sabiendo esto para borrar en el ultimo li, yo se que es length - 1var lastItemPosition = items.length - 1;// con la posicion del ultimo elemento obtengo el utlimo <li>// recuerda que para acceder a un posicion especifica en un array usas los []var lastItemElem = items[lastItemPosition];// proceso a eliminar el utlimo elementomyList.removeChild( lastItemElem );
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 --- var lastItemElem = items[lastItemPosition];// proceso a eliminar el utlimo elementolastItemElem.parentNode.removeChild( lastItemElem );
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.
nicoalv1984:
Ok Experto muchisimas pero muchisimas gracias por su respuesta.
Saludos Cordiales.
Navegación
Ir a la versión completa