Quiero eliminar todo el CSS en línea de un elemento y todos sus elementos secundarios.

Ahora lo hago de esta manera:

$('#element').attr('style', '');
$('#element').find('div').attr('style', '');
$('#element').find('a').attr('style', '');
$('#element').find('span').attr('style', '');
$('#element').find('p').attr('style', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="element" style="color:red">
  <div id="childrenA" style="background: red">
    <a href="#" style="text-decoration:underline">bla bla</a>
  </div>
  <div id="childrenB" style="width: 100px"></div>
  <span style="height:50px"><p style="overflow:hidden"></p></span>
</div>

Pero eso es mucho código ... ¿Hay una forma más rápida?

2
Borja 10 dic. 2015 a las 21:57

3 respuestas

La mejor respuesta

Tu puedes sólo:

$('#element, #element *').attr('style','');

Puede lograr mucho desde el selector css, lea más sobre esto aquí

Los 30 selectores CSS que debes memorizar, aquí.

1
Adi Darachi 10 dic. 2015 a las 19:05

Puede seleccionar todos los elementos descendientes utilizando el selector universal y luego use el .addBack() método para volver a agregar el elemento inicial:

$('*', '#element').addBack().removeAttr('style');

O:

$('#element').find('*').addBack().removeAttr('style');
1
Josh Crozier 10 dic. 2015 a las 19:19

La forma más simple sería:

$('#element, #element *').removeAttr('style');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="element" style="color:red">
  <div id="childrenA" style="background: red">
    <a href="#" style="text-decoration:underline">bla bla</a>
  </div>
  <div id="childrenB" style="width: 100px"></div>
  <span style="height:50px"><p style="overflow:hidden"></p></span>
</div>

Literalmente: encuentre #element y cualquier elemento debajo de él, luego elimine los atributos style que puedan tener.

1
Paul Roub 10 dic. 2015 a las 19:05