How can I make a button hidden only when the user is browsing with IE using javascript

Question

Here is my code.. I want to hide the button if the user is browsing with IE. I tried like this but it's not working can any one help me out.

<!DOCTYPE html>
<html>
<head>

<script> 
    var lang = navigator.systemLanguage; 
    if (lang!='en-US'){
            document.write("Well, this is not internet explorer");
    } else{
            document.write("This is internet explorer");

           document.getElementById('btn1').style.visibility='hidden';
         }
    </script> 

</head>
<body>

<p>This is a paragraph.

</p>

<button class="btn1">Input</button>
</body>
</html>

You may find the following links useful: http://stackoverflow.com/questions/20392163/did-ie11-remove-javascript-conditional-compilation (see `ScriptEngineMajorVersion` at bottom, seems to work for all IEs I have tested, but not futureproof). Also for feature detection, http://msdn.microsoft.com/en-gb/library/ie/hh273397%28v=vs.85%29.aspx and implementation detection http://msdn.microsoft.com/en-gb/library/ie/ms536446%28v=vs.85%29.aspx (been around since IE6) -- you may be able to find an IE specific feature that works (http://www.howtocreate.co.uk/tutorials/jsexamples/hasFeature.html) — Pebbl, Dec 19 '14 at 09:38

score 1 · Answer 1 · answered Dec 19 '14 at 09:07

You may try conditional comments, without javascript:

<!--[if IE]>
   <button>Not for IE</button>
<![endif]-->

And more:

<!--[if IE]>
According to the conditional comment this is IE<br/>
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br/>
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br/>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br/>
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br/>
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br/>
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br/>
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br/>
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br/>
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9
<br/>
<!-- <![endif]-->

Unfortunately conditional comments can no longer be relied upon for modern versions of IE. http://msdn.microsoft.com/en-gb/library/ie/hh801214%28v=vs.85%29.aspx — Pebbl, Dec 19 '14 at 09:16
whom ever is in charge of IE - get it together. Trash it - or rebuild it. It's garbage. — zero_cool, Mar 18 '18 at 21:39

score 0 · Answer 2 · answered Dec 19 '14 at 09:08

There are many ways to do that, there two of them:

Using CSS:

Add the below css class into your button and make it hide for IE browser, like

<!--[if gt IE 7]>
<style>.hideBtn{display:none}</style>
<!--<![endif]-->

Using Javascript:

window.navigator, by finding the browser version, make it hidden document.getElementById('btn1').style.display = 'none';

score 0 · Accepted Answer · answered Dec 23 '14 at 07:20

thanks for your help i found the solution .

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<style>.hideBtn{display:none}</style>
<![endif]-->
<script> 
    var lang = navigator.systemLanguage; 
    if (lang!='en-US'){
            document.write("Well, this is not internet explorer");
    } else{
            document.write("This is internet explorer");

    }


    </script> 

</head>
<body>

<p>This is a paragraph.

</p>

<button class="hideBtn" id ="hideBtn">Input</button>
</body>
</html>

How can I make a button hidden only when the user is browsing with IE using javascript

3 Answers3