Cambiar el HTML de un elemento <li>

[schattenburg]

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

[Trublux]

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:

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

Y el JS algo así (me gusta más "on" que "click"):

Código Javascript:

jQuery(function($){
 
    $('.ui-widget-content').on('click', '.bt_borrar_lado_derecho', function(event){
        event.preventDefault();
        $(this).parent().remove();
    });
 
});
 

P.D.: Por favor utiliza el resaltado de sintaxis cuando pongas código.