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