user3784238 user3784238 - 4 years ago 115
HTML Question

How can I remove a node from selected html, without removing it from the current page?

I'm using jquery to grab HTML from my page and open it in a new window to print. I have to customize some of the styles so that the formatting works when I print it. I have a table on my main page that has

<colgroup>
to define the width of the columns, but when I print it, I've hidden the last column (since it has a button that there's no need for on the printout, and the button throws off the formatting when printed), but the width of the column remains due to the colgroup. If I remove the colgroup from the table, the non-hidden columns fill the width and formatting is perfect. I don't know how to delete the colgroup node on my print-window though, without deleting it from the origin window (which can't happen). This is my code for printing:

var newWin;

function printDetails() {
var content = $("#pdf-area").html();
var host = window.location.protocol + "//" + window.location.host;
var cssFiles = [
host + "/Themes/MSD/Styles/template/ma-order-details-2.css",
host + "/Scripts/libraries/zurb-responsive-tables/0.0.0/responsive-tables.css",
host + "/Themes/MSD/Styles/template/checkout-cart-2.css",
host + "/Themes/MSD/Styles/msdtheme.css",
host + "/Themes/MSD/Styles/foundation.css",
host + "/Themes/MSD/Styles/base.css",
host + "/Themes/MSD/Styles/print.css"
];
newWin = window.open();
cssFiles.forEach(function (file) {
newWin.document.write('<link rel="stylesheet" href="' + file + '" type="text/css" />');
});
newWin.document.write("<span class='please-wait'>Please wait...</span>");
newWin.document.write("<div class='ma-order-details-2'>");
newWin.document.write(content);
newWin.document.write("</div>");
newWin.document.close();
newWin.focus();
setTimeout(function () {
newWin.print();
newWin.close();
}, 1000);
}


I want to delete the colgroup from content, or delete it from newWin, but I don't know how to do this. $("colgroup").remove() will delete it from the origin page, not from the new window.

Answer Source

Instead of removing, you could be hiding it with display:none on your print stylesheet.

@media print {
    ...
    .colgroup {
         display:none;
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download