How to remove the attribute style of multiple tags using jQuery?

Question

this is my problem...I'm trying to copy the code from below this is the code:

    <div class="modalMask" id="ventana_factura_1">
   <div class="modalContent">
      <p style="text-align: right; color: red;" class="mini-1">Folio: 1</span><span>Serie: A</span></p>
      <div style="text-align: right;" class="mini-2">
         <p>Fecha</p>
         <p>2016-01-14</p>
      </div>
      <p class="mini-3">One name</p>
      <p class="mini-4">More data</p>
      <h2 class="mini-5" style="text-align: center; color: #269FE4;">FACTURA</h2>

      <div class="div-table mini-6">
         <div class="div-table-row mini-7">
            <div class="div-table-col mini-8" align="center" style="width: 70px;"><b>Cantidad</b></div>
            <div class="div-table-col mini-9" style="width: 260px;"><b>Descripcion</b></div>
            <div class="div-table-col mini-10" style="width: 100px;"><b>Precio unitario</b></div>
            <div class="div-table-col mini-11" style="width: 110px;"><b>Importe</b></div>
         </div>
      </div>
      <div class="div-table-row mini-12">
         <div class="div-table-col mini-13" style="width: 70px;">5</div>
         <div class="div-table-col mini-14" style="width: 260px;">This is a description</div>
         <div class="div-table-col mini-15" style="width: 100px;">Price</div>
         <div class="div-table-col mini-16" style="width: 110px;">100</div>
      </div>
   </div>
</div>

and I'm copying the code with var factura = $('#ventana_factura_1).html(); and then assign the content to another div $('#newdiv').html(factura) and it is working but I would like to remove the attribute style of every tag to just leave in each tag the attribute "class" and its value...something like this:

<div class="modalMask" id="ventana_factura_1">
   <div class="modalContent">
      <p class="mini-1">Folio: 1</span><span>Serie: A</span></p>
      <div class="mini-2">
         <p>Fecha</p>
         <p>2016-01-14</p>
      </div>
      <p class="mini-3">One name</p>
      <p class="mini-4">More data</p>
      <h2 class="mini-5">FACTURA</h2>

      <div class="div-table mini-6">
         <div class="div-table-row mini-7">
            <div class="div-table-col mini-8" align="center"><b>Cantidad</b></div>
            <div class="div-table-col mini-9"><b>Descripcion</b></div>
            <div class="div-table-col mini-10"><b>Precio unitario</b></div>
            <div class="div-table-col mini-11"><b>Importe</b></div>
         </div>
      </div>
      <div class="div-table-row mini-12">
         <div class="div-table-col mini-13">5</div>
         <div class="div-table-col mini-14">This is a description</div>
         <div class="div-table-col mini-15">Price</div>
         <div class="div-table-col mini-16">100</div>
      </div>
   </div>
</div>

It's this possible? and how could I do this?, thanks.

Answer 1

Try this:

$("*[style]").removeAttr("style");

See it live: https://jsfiddle.net/pj7j202e/

This gets any element that has the style attribute, and removes it. Notice that by using [style] in your selector, you select only the ones that actually have the style attribute in them, thus avoiding the elements with no style.

Edit: As per @A. Wolff's suggestion, if you just want to get the elements inside your factura, then try this:

$("#ventana_factura_1 *[style]").removeAttr("style");

Pretty much the same, but it will only target within ventana_factura_1's elements.