Remove all attributes from an HTML element and all its children

Question

In the following code, I would like to remove all attributes, classes, etc. from all the HTML tags inside the elements that have class "card-back", so the result are the bare tags (+ content) only. I looked here and here, but couldn't get it to work. Here's my code so far:

$.fn.removeAttributes = function(only, except) {
  if (only) {
    only = $.map(only, function(item) {
      return item.toString().toLowerCase();
    });
  };
  if (except) {
    except = $.map(except, function(item) {
      return item.toString().toLowerCase();
    });
    if (only) {
      only = $.grep(only, function(item, index) {
        return $.inArray(item, except) == -1;
      });
    };
  };
  return this.each(function() {
    var attributes;
    if (!only) {
      attributes = $.map(this.attributes, function(item) {
        return item.name.toString().toLowerCase();
      });
      if (except) {
        attributes = $.grep(attributes, function(item, index) {
          return $.inArray(item, except) == -1;
        });
      };
    } else {
      attributes = only;
    }
    var handle = $(this);
    $.each(attributes, function(index, item) {
      handle.removeAttr(item);
    });
  });
};


$('.card_back').removeAttributes(null, null).filter(function() {
  var data = $(this);
  back = data.html().trim();
  alert(back);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card_wrapper">
  <div class="card_navigation">
    zurück |
    <a title="Titletext" href="/xyz">next</a> </div>
  <div class="card_front">
    <span class="info">Front</span>
    <p>here's just some text
      <br>and one more line.
    </p>
    <p>here's just another text
      <br>and one more line.
    </p>
  </div>
  <div class="card_back">
    <span class="info">Back</span>
    <p class="test"><span id="test3">Lorem Ipsum non dolor <strong>nihil est major</strong>, laudat amemus hibitet</span></p>
    <p><span style="color: red">- <strong>Non solum</strong>, sed calucat ebalitant medetur</span></p>
    <p>&nbsp;</p>
  </div>
</div>

Answer 1

As pointed out in this response you can extend removeAttr to take no parameters and delete all attributes.

BEWARE, YOU WILL REMOVE SRC ATTRIBUTE FROM IMAGES INSIDE!!!

Then paired with removeClass (wich already can take no params) and a loop over each element gives this:

var removeAttr = jQuery.fn.removeAttr;
jQuery.fn.removeAttr = function() {

  if (!arguments.length) {
    this.each(function() {

      // Looping attributes array in reverse direction
      // to avoid skipping items due to the changing length
      // when removing them on every iteration.
      for (var i = this.attributes.length -1; i >= 0 ; i--) {
        jQuery(this).removeAttr(this.attributes[i].name);
      }
    });

    return this;
  }

  return removeAttr.apply(this, arguments);
};

$('.card_back').find('*').each(function( index, element ) {
  $(element).removeClass();
  $(element).removeAttr();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card_wrapper">
  <div class="card_navigation">
    zurück |
    <a title="Titletext" href="/xyz">next</a> </div>
  <div class="card_front">
    <span class="info">Front</span>
    <p>here's just some text
      <br>and one more line.
    </p>
    <p>here's just another text
      <br>and one more line.
    </p>
  </div>
  <div class="card_back">
    <span class="info">Back</span>
    <p class="test"><span id="test3">Lorem Ipsum non dolor <strong>nihil est major</strong>, laudat amemus hibitet</span></p>
    <p><span style="color: red">- <strong>Non solum</strong>, sed calucat ebalitant medetur</span></p>
    <p>&nbsp;</p>
  </div>
</div>