Hola, quería eliminar todos los valores de atributo y estilos asociados con un tag en html

Entrada:

<div id="content">
   <span id="span" data-span="a" aria-describedby="span">span</span>
   <p class="a b c" style="color:black;">paragraph</p>
</div>

mi salida esperada:

<div id="content">
   <span>span</span>
   <p>paragraph</p>
</div>

lo que he intentado:

$(function(){
  var content = $('#content').html();
  $(content).removeAttr("style");
  $(content).html().replace(/<~="">/, "");
  console.log(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
       <span id="span" data-span="a" aria-        describedby="span">span</span>
       <p class="a b c" style="color:black;">paragraph</p>
    </div>
1
EaBengaluru 8 sep. 2018 a las 17:35

4 respuestas

La mejor respuesta

Puede usar Element.getAttributeNames() para obtener matriz de todos los nombres e iterar eso para eliminarlos

$('#content *').each(function(_, el) { 
  el.getAttributeNames().forEach(el.removeAttribute.bind(el));
});

console.log($('#content')[0].outerHTML)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <span id="span" data-span="a" aria-describedby="span">span</span>
  <p class="a b c" style="color:black;">paragraph</p>
</div>

Nota polyfill requerido para algunos navegadores

2
charlietfl 8 sep. 2018 a las 15:44

Este fragmento puede ayudarte

$(main);

function main() {

  var a = $('#content *');
  a.toArray().forEach(x => {
    var attrs = attrNames(x);
    attrs.forEach(attr => x.removeAttribute(attr));

  })
}


function attrNames (el) {
  return [...el.attributes].map(x => x.name)
}

Básicamente puede obtener la lista de atributos usando la propiedad attributes y luego eliminar cada uno de ellos del elemento

0
ashish singh 8 sep. 2018 a las 15:02

Puede usar jQuery.removeAttr () para eliminar varios atributos a la vez:

const $content = $('#content');

$content.find('*').each((i, elem) => {
  const attrs = [...elem.attributes].map(attr => attr.name).join(' ');
  $(elem).removeAttr(attrs);
});


console.log($content.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <span id="span" data-span="a" aria-describedby="span">span</span>
  <p class="a b c" style="color:black;">paragraph</p>
</div>
1
Yosvel Quintero 8 sep. 2018 a las 16:34

Prueba esto:

Elija .children () para obtener hijos y eliminar todos los atributos con . removeAttr () con cada elemento

$(function() {
    var content = $('#content');
    $(content).removeAttr("style");
    $(content).children().each(function() {
        var attrs = Array.from(this.attributes);
        for(var attr of attrs){
            $(this).removeAttr(attr.name);
        }
    });
    console.log(content.html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
   <span id="span" data-span="a" aria-describedby="span">span</span>
   <p class="a b c" style="color:black;">paragraph</p>
</div>
1
Hongarc 8 sep. 2018 a las 15:25