Remove input element by ID with javascript

Question

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?

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](http://www.netmagazine.com/tutorials/javascript-debugging-beginners). — Felix Kling, Aug 10 '13 at 17:15
@maxmitch Your HTML has a Syntax error in the first Line. CHeck my answer. Explanation included — AnaMaria, Aug 10 '13 at 17:59

SarathSprakash · Accepted Answer · 2013-08-10T17:30:00.857

10

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>

edited Aug 10 '13 at 17:30

answered Aug 10 '13 at 17:23

SarathSprakash

4,614
2
19
35

score 6 · Answer 2 · answered Aug 10 '13 at 17:09

6

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.

answered Aug 10 '13 at 17:09

plz see working jsfiddle. or see this http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id – Ishan Jain Aug 10 '13 at 17:18
Sorry I was using the live function on dreamweaver and doesn't seem to be working. Just putting it on the internet now to see if it works! – maxmitch Aug 10 '13 at 17:31
This is a very stupid question and irrelevant but is there an option other than `.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? – maxmitch Aug 10 '13 at 17:41
You put put a small script immediately after the element. It can't execute earlier than that, or the element won't exist, and you won't be able to get a reference to it. – Aug 10 '13 at 17:44

AnaMaria · Answer 3 · 2013-08-10T17:57:49.627

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();
};

The OP isn't using XHTML, omitting the quotes around an attribute value consisting entirely of letters is not an error of any kind. — Quentin, Aug 10 '13 at 18:03
*You should not assign ID's like "photo"* — What is wrong with "photo" as an ID? — Quentin, Aug 10 '13 at 18:05

score 0 · Answer 4 · answered May 10 '20 at 11:01

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>

score -2 · Answer 5 · edited Aug 10 '13 at 17:40

-2

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

Use this:

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

edited Aug 10 '13 at 17:40

David Cain

16,484
14
65
75

answered Aug 10 '13 at 17:16

Sikander

654
1
7
21

Remove input element by ID with javascript

5 Answers5