In my mobile application, I'm loading a website using WebView as below,
webBrowser1.Source = "https://overwatchleague.com/en-us/news/22482778/world-cup-bangkok-s-standout-players";
InitializeNewsPageAsync();
public async void InitializeNewsPageAsync()
{
webBrowser1.Navigated += async (o, s) =>
{
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('Navbar is-compact is-auto is-custom-logo'));");
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('c-Header js-header'));");
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('u-verticalNavPadding'));");
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('ContentModule ContentModule-background--white'));");
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('BuyCTA'));");
await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('TexturedBackground TexturedBackground--dark'));");
};
}
I want to remove certain parts of the page so that I can only show the main content. Like a reader in smartphone browsers. However, neither webBrowser1.Eval() nor webBrowser1. EvaluateJavaScriptAsync() worked. I also tried 2 different JavaScripts,
document.getElementByClassName('Navbar is-compact is-auto is-custom-logo').style.display = 'none';
and
element.parentNode.removeChild(document.getElementById('Navbar is-compact is-auto is-custom-logo'));
None of them worked. The main content I only want to show is in div tag
<div class="u-horizontalPadding--medium" id="main-news-section"> ... </div>
I have tried loading only the content of that div tag using XPath and HtmlWebViewSource but that only loads the basic HTML without CSS nor JavaScript. In pictures, this is what I want to achieve
and this is what the page looks like without manipulation.

