I tried to remove element dynamically but the removed element still shows up on screen, and is removed when clicked on the element.

here is the code i used

 onPageFinished: (url){
        removeAds(url);
      },
 void removeAds(String url){
      print("asdjkhjahsdk");
      //_controller.loadUrl('javascript: var ad= document.getElementById("_b04pct_2709847"); ad.parentNode.removeChild(ad);');
      _controller.evaluateJavascript('var ad= document.getElementById("_b04pct_2709847"); ad.parentNode.removeChild(ad);');

  }


Solution 1: Wenhui Luo

evaluateJavascript("document.getElementById('_b04pct_2709847').style.display='none';")


Solution 2: Adriano Freires

Try this!

evaluateJavascript("document.getElementsByClassName('_b04pct_2709847')[0].style.display='none';");

I guess you forgot the '[0]'. I try to hide the element before load the page. Did you have success?


Solution 3: aolsan

Since webview_flutter 3.0.0 this is how I do this

with as a future that is controller = Completer<WebViewController>();

onProgress: (progress) {

        if (progress > 30) {
          //remove the element with class name
          controller.future.then((webviewController) => webviewController
              .runJavascript(
                  'document.getElementsByClassName("td-header-template-wrap")[0].remove();')
              .then(
                  (value) => debugPrint('Page finished running Javascript'))
              .catchError((onError) => debugPrint('$onError')));
        }
      },

I do it in onProgress because I want the javascript to run once and only once before the full page loading completes. This can also be done in onPageFinished. Sometimes the tag doesn't exist before the javascript is run which is why it's preferred to do this in onPageFinished.