拿一個div，使用純javascript從打印中刪除一些元素

Question

我在javascript中有一個打印功能，它提升了所選的div元素，替換了html內容並打開了打印對話框，因此只打印了特定的div。

但是在該div中，我還需要從打印對話框中刪除一些圖像和圖標。

function printArticle(divId) {
        var originalHtml = document.body.innerHTML;
        var printContent = document.getElementById(divId).innerHTML;
        var imgs = document.getElementById(divId).getElementsByTagName('img');
        imgs[0].style.display = 'none';
        document.body.innerHTML = printContent;
        window.print();
        document.body.innerHTML = originalHtml;
    }

顯然上面的代碼對用於可打印版本的printContent沒有影響，因為它是一個字符串，所以我不確定如何在這里修復邏輯。

我已經嘗試了正則表達式，但它需要非常特定於img標簽，並且在圖像要改變或其他情況下並不理想。

我希望上面的解決方案可以在任何元素上使用，因為我還想刪除另一個div。

Answer 1

如果您必須使用Javascript路由而不是CSS路由，則可以執行以下操作：

function printArticle(divId) {
  const originalHTML = document.body.innerHTML;
  document.body.innerHTML = document.getElementById(divId).innerHTML;
  document.querySelectorAll('img')
    .forEach(img => img.remove())
  window.print();
  document.body.innerHTML = originalHtml;
}

但請注意，分配innerHTML將破壞Javascript的任何其他部分中的所有現有元素引用。 這是一個非常糟糕的選擇。

另一種可能性是打開一個新窗口，刪除相應的圖像，然后打印並關閉新窗口，而不更改原始窗口中的任何內容。

Answer 2

    function printArticle(divId) {
        var originalHtml = document.body.innerHTML;
        var printContent = document.querySelectorAll('img').forEach(img => img.remove());
        printContent = document.getElementById(divId).innerHTML;
        document.body.innerHTML = printContent;
        window.print();
        document.body.innerHTML = originalHtml;
    }

感謝@CertainPerformance提出解決這個問題的想法。