Foros del Web » Programando para Internet » Jquery »

Cambiar el HTML de un elemento <li>

Estas en el tema de Cambiar el HTML de un elemento <li> en el foro de Jquery en Foros del Web. Hola a todos, llevo un buen rato intentando solucionar este problema y no acabo de conseguirlo. A ver si me podéis echar una mano. Tengo ...
  #1 (permalink)  
Antiguo 29/08/2013, 10:16
 
Fecha de Ingreso: junio-2007
Mensajes: 298
Antigüedad: 16 años, 9 meses
Puntos: 5
Cambiar el HTML de un elemento <li>

Hola a todos, llevo un buen rato intentando solucionar este problema y no acabo de conseguirlo. A ver si me podéis echar una mano.

Tengo el siguiente código:

<div id="lado_derecho">
<h1 class="ui-widget-header">Lado derecho</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">
<img src="../images/banners/banner_1.jpg">
<a href="#"><img class="bt_borrar_lado_derecho" id="21" src="images/icono_borrar.png"></a>
</li>
<li class="placeholder">
<img src="../images/banners/banner_2.jpg">
<a href="#"><img class="bt_borrar_lado_derecho" id="23" src="images/icono_borrar.png"></a>
</li>
<li class="placeholder">
<img src="../images/banners/banner_3.jpg">
<a href="#"><img class="bt_borrar_lado_derecho" id="22" src="images/icono_borrar.png"></a>
</li>
</ol>
</div>
</div>

Y luego en JQuery tengo este código:

$(".bt_borrar_lado_derecho").click(function() {
$("#lado_derecho ol li [id*="+this.id+"]").each(function(){
$(this).html("");
});
});

Es decir, que cuando se le de al icono de eliminar se borre todo el HTML de ese <li> en concreto pero que se sigan manteniendo el de los otros. He probado de muchas maneras diferentes y nada. ¿Alguna idea?

Gracias
  #2 (permalink)  
Antiguo 30/08/2013, 00:46
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 5 meses
Puntos: 48
Respuesta: Cambiar el HTML de un elemento <li>

Hola.
Primero yo podría la clase "bt_borrar_lado_derecho" a los enlaces en vez de a las imágenes.
Cuando ejecutes el evento usa $(this) en vez de this y para la acción por defecto de los enlaces (el "click").
El HTML sería algo asi:
Código HTML:
Ver original
  1. <div id="lado_derecho">
  2.     <h1 class="ui-widget-header">Lado derecho</h1>
  3.     <div class="ui-widget-content">
  4.         <ol>
  5.             <li class="placeholder">
  6.                 <img src="http://www.forosdelweb.com/f179/images/banners/banner_1.jpg">
  7.                 <a href="#" class="bt_borrar_lado_derecho"><img id="21" src="images/icono_borrar.png"></a>
  8.             </li>
  9.             <li class="placeholder">
  10.                 <img src="http://www.forosdelweb.com/f179/images/banners/banner_2.jpg">
  11.                 <a href="#" class="bt_borrar_lado_derecho"><img id="23" src="images/icono_borrar.png"></a>
  12.             </li>
  13.             <li class="placeholder">
  14.                 <img src="http://www.forosdelweb.com/f179/images/banners/banner_3.jpg">
  15.                 <a href="#" class="bt_borrar_lado_derecho"><img id="22" src="images/icono_borrar.png"></a>
  16.             </li>
  17.         </ol>
  18.     </div>
  19. </div>

Y el JS algo así (me gusta más "on" que "click"):
Código Javascript:
Ver original
  1. jQuery(function($){
  2.  
  3.     $('.ui-widget-content').on('click', '.bt_borrar_lado_derecho', function(event){
  4.         event.preventDefault();
  5.         $(this).parent().remove();
  6.     });
  7.  
  8. });

P.D.: Por favor utiliza el resaltado de sintaxis cuando pongas código.
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España

Última edición por Trublux; 30/08/2013 a las 00:51 Razón: Añadir algunos enlaces que creo que pueden ser útiles

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:47.