Remove DIV from a webpage for webview android using Jsoup

Question

I want to partially view a webpage on webview android and remove some div element from the webpage. I have a webpage like this

<!DOCTYPE html>
<body>

<div id="a"><p>Remove aa</p></div>
<div id="b"><p>bb</p></div>

</body></html>

Now I want to remove the div with id 'a' from the webpage.

I tried to code it with Jsoup but I am not well enough to make it out. Please see my full code:

import java.io.IOException;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class CustomWebsite extends Activity {

    private WebView webView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_website); 

         Document doc;

         String htmlcode = "";

         try {
             doc = Jsoup.connect("http://skyasim.info/ab.html").get();
             doc.head().getElementsByTag("DIV#a").remove();

              htmlcode = doc.html();


         } catch (IOException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
         }

        webView = (WebView) findViewById(R.id.webView_test);
        webView.setWebViewClient(new myWebClient());
        webView.getSettings().setJavaScriptEnabled(true); 
        webView.loadUrl("htmlcode");


        }

          public class myWebClient extends WebViewClient
            {
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    // TODO Auto-generated method stub
                    super.onPageStarted(view, url, favicon);
                }

                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    // TODO Auto-generated method stub

                    view.loadUrl(url);
                    return true;

                }
            }


}

Do you want to remove it and keep the rest of the code, or do you want to select the other code instead of removing it? — Daniel B, Aug 02 '13 at 07:09

score 5 · Accepted Answer · answered Jun 21 '15 at 05:18

You can do this without using Jsoup you know. Just use plain old javascript. The following code will show how to remove an element from the HTML page and display the rest.

final WebView mWebView = (WebView) findViewById(R.id.mWebViewId);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
 @Override
public void onPageFinished(WebView view, String url)
{
mWebView.loadUrl("javascript:(function() { " +
    "document.getElementById('a')[0].style.display='none'; " +
    "})()");
}
});
mWebView.loadUrl(youUrl);

Daniel B · Answer 2 · 2013-08-02T19:24:02.703

Remove it from the document by selecting it and then using the remove-method.

doc.select("div#a").remove();
System.out.println(doc);

Example:

Document doc = Jsoup.parse(html);
System.out.println("Before removal of 'div id=\"a\"' = ");
System.out.println("-------------------------");
System.out.println(doc);

doc.select("div#a").remove();
System.out.println("\n\nAfter removal of 'div id=\"a\"' = ");
System.out.println("-------------------------");
System.out.println(doc);

will result in

Before removal of 'div id="a"' = 
-------------------------
<!DOCTYPE html>
<html>
 <head></head>
 <body> 
  <div id="a">
   <p>Remove aa</p>
  </div> 
  <div id="b">
   <p>bb</p>
  </div> 
 </body>
</html>


After removal of 'div id="a"' = 
-------------------------
<!DOCTYPE html>
<html>
 <head></head>
 <body>  
  <div id="b">
   <p>bb</p>
  </div> 
 </body>
</html>

score 2 · Answer 3 · answered Aug 02 '13 at 08:54

I had tried to use Jsoup to do something similar before, but my app always crash. If you are open to using Javascript only (which helps to make your app size smaller), here is what I did for my app:

webview3.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            view.loadUrl("javascript:var con = document.getElementById('a'); " +
                    "con.style.display = 'none'; ");

            }


    });

Hope my Javascript is correct. The idea here is to use Javascript to hide the div after the page has finished loading.

That way, the div with id 'a' will be displayed while the webpage is loading which can take a few seconds. So it's not really the best possible solution. — Stan, Jun 07 '15 at 13:12

Remove DIV from a webpage for webview android using Jsoup

3 Answers3

Linked