How to remove a element while html embedding (Basically for WebView)

I have a custom html file in my android studio project which embeds widgetbot. My html file is as below:

<!DOCTYPE html>
<html>
<head>
    <title> <!-- title bar --> </title>
    <!-- header for the website -->
</head>
<body>

<widgetbot
  server="***"
  channel="***" 
  width="100%" height="100%" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"
></widgetbot>

<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>

</body>
</html>

After the webpage loads, in inspect element, the webpage loads normally but it looks like another webpage loads inside element.

I want to remove this part as it the header which i dont want.

<header class="header css-1nvbkb4-Root e1gp86mg0">
   <div class="css-1xdpm0r-SingleChannel e1gp86mg1">
      <header class="header css-ftpwd8-Root e60jqxd0">
         <img src="https://cdn.discordapp.com/icons/436489103958343680/acb5fe057d2b727bb0d880a8dd4bb498.webp?size=64" class="icon css-1gbdayj-Icon e60jqxd2">
         <h1 class="name css-1xb0hmy-Name e60jqxd4">.:BlackLine Cops And Robbers:.</h1>
         <div class="count css-1tkboa1-Count e60jqxd6">11</div>
         <button class="css-yq6jfn-Close-focusable ey5ep3f1"></button>
      </header>
   </div>
   <div class="css-a39jwx-Inner e1gp86mg2">
      <button class="hamburger css-1xuxpa9-Ham ev6qi2a0">
         <div class="css-1jpnuep-Burger ev6qi2a1"></div>
      </button>
      <div class="css-ryqcd0-Stretch e1gp86mg3">
         <div class="css-1685ixl-Hash-name e1gp86mg4">chat-room</div>
         <div class="topic css-1hbm74v-Topic e1gp86mg6"></div>
      </div>
      <div class="css-zbom6h-SingleChannelAuthWrapper e1gp86mg10">
         <a class="auth css-msu8uw-Button-Button-Button-focusable-Auth ejjc4ok7" target="_blank" style="padding: 2px 0px; min-width: 28px;">
            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
               <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
               <polyline points="10 17 15 12 10 7"></polyline>
               <line x1="15" y1="12" x2="3" y2="12"></line>
            </svg>
         </a>
      </div>
   </div>
</header>

Inspect elements looks like this:

enter image description here

How can I remove the header, I am using this in android studio, but it wont help.

@Override
            public void onLoadResource(WebView view, String url) {
                super.onLoadResource(view, url);
                myWebView.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByTagName('header')[0];"
                        + "head.parentNode.removeChild(head);" +
                        "})()");
            }