Question

I want to convert the below HTML to single tag:
Before :

<div class="Parent1">
    <div class="Child1">
        <a href="#">Child1</a>
      </div>
      <div class="Child2">
        <a href="#">Child2</a>
      </div>    
    </div>
    <div class="Parent2">
      <div class="Child1">
        <a href="#">Child1</a>
      </div>
      <div class="Child2">
        <a href="#">Child2</a>
      </div>
    </div>

After :

<div class="Parent1">
  <button>Child1</button>
  <button>Child2</button>
</div>
<div class="Parent2">
  <button>Child1</button>
  <button>Child2</button>
</div>

i tried with wrapping/unwrapping. But it does not work. This I want to be generic.

Answer 1

Try this (demo):

$('div[class^="Parent"]').each(function(index, parent) {
  var html = [];
  $('a', parent).each(function(index, child) {
      html.push('<button>'+$(child).html()+'</button>');
  });
  $(parent).html(html.join(''));
});

It assumes that there is a pattern to the parent divs but that that isn’t some common class name.