cómo quitar imágenes y tablas de una capa

[YaGrEoR]

Buenas, estoy tratando de quitar las imágenes y tablas de una capa pero no he podido.

Mirando algunas páginas intenté hacerlo por medio de replace y expresiones regulares pero no me ha salido.
Otra cosa que intento es que no involucre los IDs de las imágenes o tablas porque pueden variar mucho.

Mi código Javascript es:

Código Javascript:

function limpiar(pID){
   var capa = document.getElementById(pID);
   var cadenaA = capa.innerHTML;
   cadenaA = cadenaA.replace(/<style[^>]*>[^<]*<\/style>/im, '');
   cadenaA = cadenaA.replace(/<table[^>]*>[^<]*<\/table>/im, '');
   cadenaA = cadenaA.replace(/<img[^>]*>/im, '');
   capa.innerHTML=cadenaA;
}
 

Y en una de las capas tengo:

Código HTML:

<div id="s123456789">
<style type="text/css">
      .
      .
      .
</style>
<table id="imagenes">
   <tr><td><img src="http://midominio.com/miimagen.jpg" width="100px"></td></tr>
      .
      .
      .
   <tr><td>Click en cada una para agrandar.</td></tr>
</table>
</div>
 

Cuando ejecuto limpiar(s123456789); elimina las imágenes y las etiquetas STYLE con su contenido pero la estructura de la tabla queda intacta y tambien el texto de la última fila.

Quisiera saber si existe un otro método más eficaz o si se puede arreglar mo código para que haga lo que necesito. Muchas gracias.

[zerokilled]

intentalo con metodos DOM. basicamente tienes que buscar el elemento TABLE y STYLE dentro de la capa (getElementsByTagName) y luego los remueves (removeChild).

[YaGrEoR]

Hola zerokilled, intenté lo que me dijiste pero no resultó nada, ahora mi código quedó así:

Código Javascript:

function limpiar(pID){
    var capa = document.getElementById(pID);
    var Imgs = capa.getElementsByTagName("img");
    if (Imgs.length > 0){
        for (i = 0; i < Imgs.length; i++){
            capa.removeChild(Imgs[i]);
        }
    }
 
    var Tablas = capa.getElementsByTagName("table");
    if (Tablas.length > 0){
        for (t = 0; t < Tablas.length; t++){
            capa.removeChild(Tablas[t]);
        }
    }
}
 

y cuando llamo a la función, el Developer Tools de Google Chrome me lanza el error:
NOT_FOUND_ERR: DOM Exception 8
en la línea:
capa.removeChild(Imgs[i]);

y no cambia nada en las capas.

¿Me podrían ayudar? Disculpen la molestia.

[zerokilled]

lo mas seguro es porque #capa no es el elemento padre directo del elemento que deseas remover. tienes que acceder al elemento padre del elemento a remover y desde este invocar removeChild.

[YaGrEoR]

Listo, ya me salió pero con un defecto. En una de las capas tengo 10 imágenes y sólo elimina la primera, la tercera, la quinta, la septima y la novena Edité el código según me dijiste y quedó así:

Código Javascript:

function limpiar(pID){
    var capa = document.getElementById(pID);
    var padre;
    var Imgs = capa.getElementsByTagName("img");
    if (Imgs.length > 0){
        for (var i = 0; i < Imgs.length; i++){
            //obtiene el padre
            padre = Imgs[i].parentNode;
            padre.removeChild(Imgs[i]);
        }
    }
 
    var Tablas = capa.getElementsByTagName("table");
    if (Tablas.length > 0){
        for (var t = 0; t < Tablas.length; t++){
            //obtiene el padre
            padre = Tablas[t].parentNode;
            padre.removeChild(Tablas[t]);
        }
    }
}
 

ahora no hay error ni nada pero como te dije, solo borra la primera imagen.

¿qué puede estar pasando? ¿será por el ciclo?

[zerokilled]

si, es por el ciclo y el HTMLCollection ya que este último son activos. lee este mensaje -o el tema completo- del tema problema con getelementbytagname.

[YaGrEoR]

Iniciado por zerokilled

si, es por el ciclo y el HTMLCollection ya que este último son activos. lee este mensaje -o el tema completo- del tema problema con getelementbytagname.

SIIIII!!! me sirvió, problema resuelto xD
¡Muchas gracias!