<section class="diZContainer diZmxAuto diZmy4">
  <h1 class="diZBorderBottom">HTML Remover</h1>
  <p class="diZTextJustify">The HTML Remover tool helps you clean text by removing all HTML tags, leaving only plain text. It's perfect for extracting content from HTML code without any formatting.</p>
  <div class="diZFlexColumn  diZMaxW600 diZmxAuto diZmy20 toolsSection">
    <div class="diZmt2 diZFlexColumn">
      <label for="htmlInput">Input Text with HTML:</label>
      <textarea class="diZTextAreaResizeNone" rows="10" id="htmlInput" placeholder="Paste your text with html here..."></textarea>
    </div>
    <div class="diZFlexColumn diZItemsCenter">
      <button class="diZmt2 " onclick="cleanHTML()"><span>Remove</span></button>
    </div>
    <div class="diZmt2 diZFlexColumn">
      <label for="cleanedHTML">Cleaned Text:</label>
      <textarea class="diZTextAreaResizeNone" rows="10" id="cleanedHTML" readonly placeholder="Cleaned Text will appear here..."></textarea>
    </div>
    <p class="diZDisplayNone" id="copied-notice"></p>
    <div class="diZFlexColumn diZItemsCenter">
      <button class="diZmt2 " onclick="copyToClipboard()"><span>Copy</span></button>
    </div>
  </div>
  <div>
  <!-- diZwFit diZJustifyCenter diZItemsCenter -->
    <h3>Usage:</h3>
    <ul>
        <li><strong>Enter Text with HTML:</strong> Paste your desired text with HTML into the text area provided.</li>
        <li><strong>Remove HTML:</strong> Click the "Remove" button to clean the text, stripping out all HTML tags.</li>
        <li><strong>View Cleaned Text:</strong> The cleaned, plain text will appear in the output text area below.</li>
        <li><strong>Copy Cleaned Text:</strong> Click the "Copy" button to copy the cleaned text to your clipboard.</li>
    </ul>
    
    <h3>Features:</h3>
    <ul>
        <li>Effortlessly removes all HTML tags from the input text.</li>
        <li>Provides a user-friendly interface for inputting and viewing text.</li>
        <li>Includes a copy function to quickly copy the cleaned text to your clipboard.</li>
        <li>Displays a notification when the text is successfully copied to the clipboard.</li>
    </ul>
    
    <h3>Example Use Cases:</h3>
    <ul>
        <li>Writers and editors extracting plain text content from HTML-formatted documents.</li>
        <li>Developers cleaning up text before using it in applications or databases.</li>
        <li>Content creators preparing text for use in plain text editors or word processors.</li>
    </ul>
</div>
</section>
<script>
  function cleanHTML() {
      const inputHTML = document.getElementById("htmlInput").value;
      
      // Create a temporary element to hold the input HTML
      const tempDiv = document.createElement("div");
      tempDiv.innerHTML = inputHTML;
      
      // Remove all HTML tags
      const plainText = tempDiv.textContent || tempDiv.innerText || "";
      
      document.getElementById("cleanedHTML").value = plainText;
  }

  function copyToClipboard() {
      const cleanedHTML = document.getElementById("cleanedHTML").value;
      navigator.clipboard.writeText(cleanedHTML)
          .then(() => {
              document.getElementById('copied-notice').style.display = 'block';
              document.getElementById('copied-notice').innerHTML = 'Text copied to clipboard!';
            setTimeout(() => {
              document.getElementById('copied-notice').style.display = 'none';
            }, 1000);
              
          })
          .catch(err => {
              // console.error('Failed to copy: ', err);
          });
  }
</script>