Removing a paticular html tag from a page

Question

I need to find and remove this paticular tag from my html page :

<div style="margin-top: 15px;">Access Denied</div>

How do I accomplish this? I have seen the following

But I still can't understand how to find and remove an exact tag that matches this string from the current whole html document.

Any way to do this?

Thanks.

Edit : I only have access to modify the contents of :`

<div style="height: 200px;width: 500px; overflow: auto;" id="message">

` Here's the whole html document when the page is loaded :

<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
            <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
                <title>Access Denied</title>
                <style type="text/css">.accessdeniedtextfont{FONT-WEIGHT: bolder;FONT-SIZE: 12px;COLOR: #565656;FONT-FAMILY: arial,san-serif;TEXT-DECORATION: none}.accessdeniedcategoryfont{font-weight:bold;  FONT-SIZE: 12px;COLOR: #336699;FONT-FAMILY: verdana,arial,san-serif;TEXT-DECORATION: none}</style>
                <meta http-equiv="Content-Language" content="en-us">
                    <script src="/javascript/validation/DefaultDeniedMessagePreview.js" type="text/javascript"/>
                </head>
                <body style="background: #FFFFFF;font-family: Arial;font-size: 12px;font-weight: bold;color: #565656;">
                    <form name="previewform">
                        <table width="100%">
                            <tbody>
                                <tr>
                                    <td align="center">
                                        <div style="background: #FFFFFF;margin-top: 9%;box-shadow: 0px 0px 10px #666666;border: 1px solid #CCCCCC;width: 600px;;height:auto">
                                            <table width="100%" cellspacing="0" cellpadding="0" align="center" style="text-align: left;">
                                                <tbody>
                                                    <tr>
                                                        <td height="15px" colspan="5">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="7%">&nbsp;</td>
                                                        <td style="color: #B02B2E;font-size: 20px;font-weight: bold;" colspan="2">
                                                            <div style="margin-top: 15px;">Access Denied</div>
                                                        </td>
                                                        <td height="75" align="right">
                                                            <img width="125" height="70" onload="callToSetImageSize(this)" src="/images/customizeimages/denied_topbar.jpeg?v=1445858787891" name="headerimage" id="headerimage">
                                                            </td>
                                                            <td width="7%">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center" colspan="5">
                                                                <div style="width: 98%;height: 2px;margin-bottom: 5px;text-align: center;border-top: 1px solid #CCCCCC;"/>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>&nbsp;</td>
                                                            <td height="30px" colspan="3">
                                                                <div style="height: 200px;width: 500px; overflow: auto;" id="message">
                                                                    <script type="text/javascript">&lt;br/&gt;var divs = document.querySelectorAll("div");&lt;br/&gt;&lt;br/&gt;for (var i = 0; i &lt; divs.length; i++) {&lt;br/&gt;  if (divs[i].textContent === "Access Denied") {&lt;br/&gt;    divs[i].parentNode.removeChild(divs[i])&lt;br/&gt;  }&lt;br/&gt;}&lt;br/&gt;</script>
                                                                    <br>
                                                                        <br>
                                                                            <font class="accessdeniedtextfont">
                                                                                <b>
                                                                                    <br>Hello </b>
                                                                                </font><b>
                                                                                    <font class="accessdeniedcategoryfont">{usr},</font>
                                                                                    <br>
                                                                                        <br>
                                                                                            <br>
                                                                                                <font class="accessdeniedtextfont">This site is unavailable at this time<br>
                                                                                                        <br>The page you are trying to access:</font>
                                                                                                        <font class="accessdeniedcategoryfont">{url}</font>
                                                                                                        <br>
                                                                                                            <font class="accessdeniedtextfont">is unavailable. <br>
                                                                                                                    <br>
                                                                                                                        <br>
                                                                                                                            <font class="accessdeniedtextfont">Good bye<br>
                                                                                                                                </font>
                                                                                                                            </font>
                                                                                                                        </b>
                                                                                                                    </div>
                                                                                                                </td>
                                                                                                                <td>&nbsp;</td>
                                                                                                            </tr>
                                                                                                            <tr>
                                                                                                                <td align="left" colspan="5">
                                                                                                                    <div style="width: 98%;height: 60px;margin-bottom: 5px;border-top: 1px solid #CCCCCC;margin-top: 25px;margin-left: 5px;">
                                                                                                                        <table>
                                                                                                                            <tbody>
                                                                                                                                <tr>
                                                                                                                                    <td>
                                                                                                                                        <img width="70" height="60" onload="callToSetImageSize(this)" src="/images/customizeimages/denied_bottombar.jpeg?v=1445858787891" name="footerimage" id="footerimage">
                                                                                                                                        </td>
                                                                                                                                        <td align="center">
                                                                                                                                            <a style="margin-left: 95px;color:#6E400F;font-weight: bold;font-size: 12px;display: none;" id="knowmorelink" href="#">Cyberoam is securing you. Click here to know more.</a>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                </tbody>
                                                                                                                            </table>
                                                                                                                        </div>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </tbody>
                                                                                                        </table>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </form>
                                                                                <script type="text/javascript">
    initDefaultDeniedMessagePreview();  
    setLabelValue();
                                                                                </script>
                                                                            </body>


                                                </html>

If using jQuery `$('div:contains("Access Denied")').remove();` — Tushar, Oct 26 '15 at 05:34
this is the access denied page within my firewall settings and only the body of the page is modifable. This access denied is fixed on the head part of the page. — Jack Michael, Oct 26 '15 at 05:38
Do you control the HTML? If you do then you should add a class or id to the element. Scouring the entire document for `div`s, and looking at their content, is very inefficient. It is also very brittle; what if you decided to change the text to "You do not have the access to this page"? — Sverri M. Olsen, Oct 26 '15 at 05:42
@SverriM.Olsen As JackMichael just said, this `
` is in the header and only the `` is modifiable. So guest271314's answer may be as efficient as it gets. — Jonathan Lam, Oct 26 '15 at 05:44
@SverriM.Olsen No I don't control the html. I have only access to a div tag within the body. I know it would be a lot easier if only the div had an id or class — Jack Michael, Oct 26 '15 at 05:47
@JackMichael Do any other `div` elements within document have `style` attribute which begins with `"margin-top"` ? — guest271314, Oct 26 '15 at 05:53
@guest271314 No there isn't at the moment. But, the js you gave me isn't working for me so far. It doesn't remove the Access Denied from the header. No errors on the console too. — Jack Michael, Oct 26 '15 at 11:05

score 3 · Accepted Answer · answered Oct 26 '15 at 05:39

3

Try using document.querySelectorAll("div") to select all div elements . Use for loop to check if each div element has .textContent matching "Access Denied" , use .removeChild() to remove node if match found

var divs = document.querySelectorAll("div");

for (var i = 0; i < divs.length; i++) {
  if (divs[i].textContent === "Access Denied") {
    divs[i].parentNode.removeChild(divs[i])
  }
}

<div style="margin-top: 15px;">Access Denied</div>

answered Oct 26 '15 at 05:39

guest271314

1
10
82
156

Beat me to it! Also like the use of `textContent`: I've never used it (I've used `innerHTML`) and I just searched it, and it's better for text-only. We learn something every day! – Jonathan Lam Oct 26 '15 at 05:43
@JackMichael If `div` having text "Access Denied" is only div in document which has `style` attribute beginning with `"margin-top"` could substitute selector `div = document.querySelector("div[style^=margin]");` for `document.querySelectorAll("div");` , then call `div.parentNode.removeChild(div)` – guest271314 Oct 26 '15 at 05:59
It works well on a normal html page or on jsfiddle. Doesn't work on my firewall through :( . No console errors but just doesn't do it. Could it be because it's inside a div inside the body tag? – Jack Michael Oct 26 '15 at 11:25
@JackMichael Can include full `html` of document at Question ? _"Doesn't work on my firewall through "_ Where is `js` to remove element called from ? – guest271314 Oct 26 '15 at 13:52
@guest271314 I've edtited the question and added the full HTML – Jack Michael Oct 27 '15 at 07:27
@JackMichael `html` contains syntax errors http://plnkr.co/edit/eEyxJlFdzRQrLUKqzoDv – guest271314 Oct 27 '15 at 09:03
@guest271314 I just formatted it using Notepad++ xml plugin and changed the text. Here's the exact html without me touching it : http://plnkr.co/edit/QoVdJJJusqxbammDmiRW?p=preview – Jack Michael Oct 27 '15 at 11:02
@guest271314 You can see it working and the script you provided me also added in it at : http://plnkr.co/edit/QoVdJJJusqxbammDmiRW?p=preview – Jack Michael Oct 27 '15 at 11:03

score 1 · Answer 2 · 2015-10-26T13:29:06.293

You can address that element with XPath:

//div[text() = 'Access Denied']

You can then find the element using document.evaluate and remove it.

This is likely to be faster than iterating over all divs yourself, if that matters.

For those of you still learning XPath, the double slashes (//) mean to look for matches at any level, anywhere. the div part obviously means to find elements whose tagname is "div". The part in square brackets ([]) is a condition for narrowing down the divs to select.

Here is some sample code:

var divs, div, xpath = "//div[text() = 'Access Denied']";

divs = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null); 
while (div = divs.iterateNext()) div.parentNode.removeChild(div);

The MDN page on document.evaluate provides some suggestions on optimizing this.

How exactly does the javascript code look like using document.evalute? — Jack Michael, Oct 26 '15 at 11:06

Removing a paticular html tag from a page

2 Answers2