使用JavaScript按ID删除输入元素

Question

我已经做了这件事，但似乎没有起作用！：

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>

我将<input>放在一个<div>里面，因为它们是父子关系。这样做正确吗？

- maxmitch

---

即使Photo引用了input元素，Photo是Photo1的子元素，而不是Photo1的父元素。因此，element.parentNode.removeChild(Photo);将无法工作。学习如何调试JavaScript。 - Felix Kling

@maxmitch，你的HTML在第一行有语法错误。请检查我的答案。解释已包含。 - AnaMaria

Answer 1

试试这个。它会起作用。

下面的脚本应该放在body标签中

<script>
function hideOptionPhoto(){


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

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

- SarathSprakash

Answer 2

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

<div>是可选的（针对此代码），因为每个元素都有一个parentNode。但是可能有其他原因需要使用div标签。

- user2625787

---

请查看工作中的jsfiddle。或者访问https://dev59.com/dXA75IYBdhLWcg3wRW2c。 - Ishan Jain

抱歉，我在Dreamweaver上使用了实时功能，但似乎无法正常工作。现在将其放到互联网上，看看是否有效！ - maxmitch

这是一个非常愚蠢和不相关的问题，除了 .onload 之外，还有其他可以更早执行的选项吗？而且似乎不起作用...奇怪的是，它在 jsfiddle 上显然是有效的！我已经将其放在 if 语句内部，但我假设这不会有任何影响？ - maxmitch

你可以在元素后面立即放置一个小脚本。它不能比这更早执行，否则该元素将不存在，你将无法获取对它的引用。 - user2625787

Answer 3

好的。让我发布工作示例，然后我会给出解释。

工作示例

在你的代码中有一个"语法错误"。

//Incorrect    
     <div id=Photo1>

//Correct
    <div id="Photo1">

此外，请检查我的JavaScript函数。 函数调用没问题。 只是其中的代码有误。

您已经将 HTMLelement div（Photo1） 分配给变量 "Element"。 img（"photo"） 是 Element 的一个子元素，因此可以直接删除。 还有一个重要的点是您使用的命名约定。不应该像“photo”这样分配ID。 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();
};

- AnaMaria

---

OP没有使用XHTML，省略围绕完全由字母组成的属性值的引号不是任何错误。 - Quentin

你不应该像“photo”这样分配ID — “photo”作为ID有什么问题吗？ - Quentin

Answer 4

尝试一下

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>

- Waruna Manjula

Answer 5

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

请使用这个：

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

- Sikander