I have done this and it doesn't seem to be working!:

Javascript:

<script>
function hideOptionPhoto(){ 
    var element = document.getElementById("Photo1");
    element.parentNode.removeChild(Photo);   
};

window.onload = function() {
    hideOptionPhoto();
};
</script>

HTML:

<div id=Photo1>
    <input id="Photo" type="image" src="x.png" border="0" name="submit" alt="">
</div>

I put the <input> inside a <div> because of the parent and child situation. Is that correct?

I have done this and it doesn't seem to be working!:

Javascript:

<script>
function hideOptionPhoto(){ 
    var element = document.getElementById("Photo1");
    element.parentNode.removeChild(Photo);   
};

window.onload = function() {
    hideOptionPhoto();
};
</script>

HTML:

<div id=Photo1>
    <input id="Photo" type="image" src="x.png" border="0" name="submit" alt="">
</div>

I put the <input> inside a <div> because of the parent and child situation. Is that correct?

• javascript
• html
• input

• Even if Photo reference the input element, Photo is a child of Photo1, not of the parent of Photo1. Hence the element.parentNode.removeChild(Photo); won't work. Learn how to debug JavaScript. – Felix Kling Commented Aug 10, 2013 at 17:15
• @maxmitch Your HTML has a Syntax error in the first Line. CHeck my answer. Explanation included – AnaMaria Commented Aug 10, 2013 at 17:59

5 Answers 5

Try this out. This will work

The below script should be put inside the body tag

<script>
function hideOptionPhoto(){


var element = document.getElementById("Photo1");
var child=document.getElementById("Photo");
element.removeChild(child);

}
window.onload = function() {
  hideOptionPhoto();
};
</script>

var element = document.getElementById("Photo"); // notice the change
element.parentNode.removeChild(element);

The <div> is optional (for this) since every element has a parentNode. But there might be other reasons for having the div.

Ok. Let me post the working fiddle and the I will give the explanation.

Working Fiddle

In your code there was a "Syntax Error".

//Incorrect    
     <div id=Photo1>

//Correct
    <div id="Photo1">

In addition check my JavaScript function. The function call was ok. Just the code inside it was wrong

You already assigned the HTMLelement div(Photo1) to the variable "Element". The img("photo") is a child of Element and hence can be directly removed.

One more important point is the naming conventions that you use. You should not assign ID's like "photo"

HTML

<div id="Photo1">
    <input id="Photo" type="image" src="x.png" border="0" name="submit" alt=""/>
</div>

Javascript

function hideOptionPhoto(){     
    var element = document.getElementById("Photo1");
    var child=document.getElementById("Photo");
    element.removeChild(child);
};

window.onload = function() {
    hideOptionPhoto();
};

Try

function hideOptionPhoto(){ 
var element =  document.getElementById('Photo');
if (typeof(element) != 'undefined' && element != null)
  {
    element.remove();
    alert('Deleted');
  }

};

window.onload = function() {
    hideOptionPhoto();
};

<div id=Photo1>
    <input id="Photo" type="image" src="x.png" border="0" name="submit" alt="">
</div>

<div id="Photo1">
<input id="Photo" type="image" src="x.png" border="0" name="submit" alt="">
</div>

Use this:

document.getElementById("Photo1").innerHTML = "";