Question

I have several elements on the page. Something like:

<div id="el1"><div id="el2"><span id="el3">1</span><span id="el4">2</span></div><span id="el5">3</span></div>

I need to disable/enable any of them, using their ids.

<input type="radio" name="do" onclick="disable(document.getElementById('el4'));">        
<input type="radio" name="do" onclick="enable(document.getElementById('el4'));">

What should be in disable() and enable() functions to really disable elements?

By “disable” I mean make it invisible for user, inaccessible by “id” and be restorable by “enable()” function.

Is it possible to turn elements on/off? Entirely, I mean.

Answer 1

function  addEl4(){
   var elem = document.getElementById('el2'); 
   var newElem = document.createElement('div');
   newElem.setAttribute('id', 'el4');
   newElem.innerHTML = 2;
   elem.appendChild(newElem);
};

function  disable(elem){
   var container = document.getElementById('el2'); 
   container.removeChild(elem);
};

If you are talking in terms of removing the element from the page completely.
Then you can use the .removeChild() method..
Then need to append it to the div you are talking about..

Check Fiddle