JSFiddle - React, Tailwind, and code Playground
HTML
<div>
This should NOT be printed!
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>
<hr />
<div style="display:none">
NEVER SHOW THIS
</div>
<div id="printThis" class="printMe">
This should BE printed!
<div class="modifyMe">old</div>
</div>
<div class="printMe">
This should BE printed as well!
</div>
JavaScript
jQuery.fn.extend({
printElem: function() {
var cloned = this.clone();
var printSection = $('#printSection');
if (printSection.length == 0) {
printSection = $('<div id="printSection"></div>')
$('body').append(printSection);
}
printSection.append(cloned);
var toggleBody = $('body *:visible');
toggleBody.hide();
$('#printSection, #printSection *').show();
window.print();
printSection.remove();
toggleBody.show();
}
});
$(document).ready(function(){
$(document).on('click', '#btnPrint', function(){
$('.printMe').printElem();
});
});