Q:

wrapInner() with href of children elements

I have next structure - there are 7 blocks:
<div class="blog-item">
   <h2>...</h2>
   <p>...</p>
   <div class="jcomments-links">
      <a class="readmore-link" href="..."></a>
   </div>
</div>

I want to receive href of the inner link, delete its parent block with link and add a link inside block with class="blog-item" with the same href as deleted link...
I had wrote this:
<script>
jQuery(document).ready(function() {
    jQuery(".blog-item a.readmore-link").each(function() {
        var ahref = jQuery(this).attr("href");
        jQuery(this).parent('.jcomments-links').remove();
        jQuery(this).parent().closest('.blog-item').wrapInner(function () {
           return "<a href='" + ahref + "'></a>"
        });
    });
});
</script>

But something wrong. There will not appear new link. Any help will be greatly appreciated. Thanks

A:

Try this (run the snippet to see it work, and you'll have to use the inspector to see that the html is correct):

jQuery(document).ready(function ($) {
    $(".blog-item a.readmore-link").each(function () {
        var ahref = $(this).attr("href"),
            $wrapItem = $(this).closest('.blog-item');

        $(this).closest('.jcomments-links').remove();
        $wrapItem.wrapInner('<a href="' + ahref + '"/>');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-item">
    <h2>Heading</h2>
    <p>Paragraph</p>
    <div class="jcomments-links">
        remove 
        <a class="readmore-link" href="http://www.example.com">example</a>
    </div>
</div>

