Converting An Anchor Tag To Plain Text With Jquery

I am running into a problem with my output of an HTML-to-PDF process where my anchor tags that contain the tel: protocol are kicking back errors when clicked. It turns out that the

Solution 1:

You can use after(function) and chain hide() to hide the <a> as well

$('.menu a').after(function() {
  return $('<p>', {class: 'pdf', text: $(this).text()})
}).hide()

p.pdf { color: red }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="menu"><ahref="page.html">Page 1</a><ahref="page2.html">Page 2</a></div>

Solution 2:

use value as well in your each() method, and use the value reference to update nodes, else it will update all the nodes.

$( '.menu a' ).each(function( index,value ) {
  var res = $(value).text(); // value is for current iteration
  $(value).after('<p class="pdf">'+ res +'</p>');
  // do something else...
});

Reference here : https://api.jquery.com/jquery.each/