CODEWITHSUNDEEP
javascriptjquerynode.js
EaBengaluru
EaBengaluru

Reputation: 81

How to remove all the attribute and values associated in tags in html

Hi i wanted to remove all the attribute values and styles associated with a tag in html

Input:

<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>

my expected output:

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

what i have tried:

$(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>

Upvotes: 1

Views: 1187

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

You can use jQuery.removeAttr() to remove multiple attributes at onece:

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>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

You can use Element.getAttributeNames() to get array of all names and iterate that to remove them

$('#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>

Note polyfill required for some browsers

Upvotes: 2

hong4rc
hong4rc

Reputation: 4113

Try this:

Choose .children() to get children and remove all attributes with .removeAttr() with each element

$(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>

Upvotes: 1

ashish singh
ashish singh

Reputation: 6914

this snippet can help you

$(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)
}

basically you can get attribute list using attributes property and then remove each one of them from the element

Upvotes: 0

Related Questions