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?
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.
.onload that does it earlier? And it doesn't seem to be working... Weird, as it is obviously working on jsfiddle! I have put it inside an if statement but I assume that won't make a difference?Ok. Let me post the working fiddle and the I will give the explanation.
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 = "";
Photoreference theinputelement,Photois a child ofPhoto1, not of the parent ofPhoto1. Hence theelement.parentNode.removeChild(Photo);won't work. Learn how to debug JavaScript.