How to inactivate parts of html code by Javascript

Question

A JS newbie question:

I would like to inactivate a part of a html code (which I manually would do by ) by Javascript, depending on a numeric variable (which I extract from the file name): If var > 10 do inactivate the code.

EDITED: If possible only simple Javascript! A demo html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script> 
   var param = 10;
</script>
</head>

<body>
<p>Paragraph One</p>

<p>Beginning of the part to be removed if param > 10</p>
<a href="mailto:[email protected]">E-Mail</a><br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>

<p>Paragraph Ten</p>

</body>
</html>

It would be better if you shared a code sample, so we can help you better :) — Soubhik Mondal
– Soubhik Mondal, Commented Feb 15, 2017 at 7:56

Amani Ben Azzouz · Accepted Answer · 2017-02-15 09:05:02Z

1

Put everything you want to remove/hide inside one div with a specific class or id, then add an if condition and hide or remove the required div once the condition is true.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>

<body>
<p>Paragraph One</p>
<div id="to_remove">
<p>Beginning of the part to be removed</p>
<a href="mailto:[email protected]">E-Mail</a><br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
</div>
<p>Paragraph Ten</p>
  
<script type="text/javascript"> 
   var param = 11;
   if(param >10) document.getElementById("to_remove").remove();
   //OR if you want to show the div later use this:
   //if(param>10) document.getElementById("to_remove").style.display = 'none';
</script>
</body>
</html>

edited Feb 15, 2017 at 9:05

answered Feb 15, 2017 at 8:33

Amani Ben Azzouz

2,5653 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

newbieforever Over a year ago

Could you please show this on my demo now added to my OP?

Amani Ben Azzouz Over a year ago

it is done, you have only to put all the HTML you want to remove inside one div so it will be easy to find and remove.... you have to add your JavaScript in the body because you cannot find and element in the DOM if it is not yet created.

newbieforever Over a year ago

THANK YOU!!! I tryed to do this but i didn't know that the js script should be after the html code, not in the head. YOU ARE A SCHATZ! Can somebody mark this as answered? I do not see here if I can give you points ... Thank to the others too.

Amani Ben Azzouz Over a year ago

like I said if you add the script in the head it is like searching for something not created yet (the body is not created) and if you check the console you will see TypeError: document.getElementById(...) is null so you have to include the script after that... PS: the only one who can mark the answer as accepted is you :D

newbieforever Over a year ago

I have lost my glasses ;-) ... Where is a ANSWERED/ACCEPTED button?

|

Robby Cornelissen · Accepted Answer · 2017-02-15 07:59:52Z

0

You can remove the elements from the DOM, e.g. by using removeChild():

document.getElementById('div').removeChild(document.getElementById('p2'));

<div id="div">
  <p id="p1">Paragraph one</p>
  <p id="p2">Paragraph two</p>
</div>

answered Feb 15, 2017 at 7:59

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

1 Comment

newbieforever Over a year ago

Thank you! Hm ... as a newbie ... (1) My part of the code is not a paragraph, it contains some lines inserting images etc. (2) How to combine this with "if var > 10"?

geekbro · Accepted Answer · 2017-02-15 08:00:04Z

0

You can use css property for the same, add two classes active and inactive with css .active{display:block} and .inactive{display:none}.now you can use jquery to add and remove active and inactive classes according to your condition.like in jquery you can write

if(var > 10){
 $("div").addClass('inactive');
  }else{
 $("div").removeClass('inactive');
}

answered Feb 15, 2017 at 8:00

geekbro

1,33312 silver badges14 bronze badges

Comments

Sreetam Das · Accepted Answer · 2017-02-15 08:00:40Z

0

A CSS + jQuery way of achieving this could be by adding the class disabled:

if(condition) {
    var element = document.getElementByID('#sample_ID');
    element.addClass("disabled");
}

This is assuming that you contain the code to be disabled in the <div id="sample_ID">

answered Feb 15, 2017 at 8:00

Sreetam Das

3,4492 gold badges25 silver badges36 bronze badges

Comments

Peter B · Accepted Answer · 2017-02-15 08:06:07Z

0

If you just want to hide it, you can do this by using CSS.
E.g. to hide <div id="myDiv">Bla</div> you'd use this:

var element = document.getElementById("myDiv");
element.style.display = "none";

And if you want to show it again at some point:

element.style.display = "block";

Live example:

function hideDiv() {
  var element = document.getElementById("myDiv");
  element.style.display = "none";
}

function showDiv() {
  var element = document.getElementById("myDiv");
  element.style.display = "block";
}

#myDiv {
  border: solid 1px green
}

<button onclick="hideDiv()">Hide</button>
<button onclick="showDiv()">Show</button>
<br/>

<div id="myDiv">Bla</div>

edited Feb 15, 2017 at 8:06

answered Feb 15, 2017 at 8:00

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Collectives™ on Stack Overflow

How to inactivate parts of html code by Javascript

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related