Javascript removeChild只工作一次_Javascript

Javascript removeChild只工作一次

javascript

Javascript removeChild只工作一次,javascript,Javascript,我有一个测试输入表单，其中根据父选择框中一个选项的值创建子选择框。在“父项选择”框中选择任何其他选项都会删除子项。它起作用，但只有一次。如果再次创建子选择框，则不会通过选择其他选项之一将其删除代码如下： <html> <SCRIPT LANGUAGE="JavaScript"> function createtext(){ var var1 = document.getElementById('s'); var var2=var1.value; if (var2 =

我有一个测试输入表单，其中根据父选择框中一个选项的值创建子选择框。在“父项选择”框中选择任何其他选项都会删除子项。它起作用，但只有一次。如果再次创建子选择框，则不会通过选择其他选项之一将其删除

代码如下：

<html> 
<SCRIPT LANGUAGE="JavaScript">
function createtext(){
var var1 = document.getElementById('s');
var var2=var1.value;

if (var2 == "American Express")
{
var selector = document.createElement('select');
selector.id = 'gift';
selector.name = 'gift';
selector.size = '2';
myform.appendChild(selector);

var option = document.createElement('option');
option.value = '0';
option.appendChild(document.createTextNode('Gift card'));
selector.appendChild(option);

option = document.createElement('option');
option.value = '1';
option.appendChild(document.createTextNode('Fully owned card'));
selector.appendChild(option);

}
else
{
myform.removeChild(gift);

}
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="myform">
<SELECT id = "s" name="s" size=3 onChange="createtext()" ><OPTION>Visa    Card<OPTION>Mastercard<OPTION>American Express</SELECT>
</form>
</html>


函数createtext（）{
var var1=document.getElementById（'s'）；
var var2=var1.0值；
if（var2==“美国运通”）
{
var选择器=document.createElement（'select'）；
selector.id='gift'；
selector.name='gift'；
selector.size='2'；
myform.appendChild（选择器）；
var option=document.createElement（'option'）；
option.value='0'；
option.appendChild（document.createTextNode（“礼品卡”）；
选择器.appendChild（选项）；
option=document.createElement（'option'）；
option.value='1'；
option.appendChild（document.createTextNode（“完全拥有的卡”）；
选择器.appendChild（选项）；
}
其他的
{
myform.removeChild（礼物）；
}
}
Visa信用卡美国运通卡

在这里，它正在发挥作用

试试看

var gel = document.getElementById('gift');
if(gel){
    myform.removeChild(gel);
}

更新：

<!DOCTYPE html>
<html>

  <head>
    <script>

        function createtext() {
            var var1 = document.getElementById('s');
            var var2 = var1.value;

            if (var2 == "American Express") {
                var selector = document.createElement('select');
                selector.id = 'gift';
                selector.name = 'gift';
                selector.size = '2';
                myform.appendChild(selector);

                var option = document.createElement('option');
                option.value = '0';
                option.appendChild(document.createTextNode('Gift card'));
                selector.appendChild(option);

                option = document.createElement('option');
                option.value = '1';
                option.appendChild(document.createTextNode('Fully owned card'));
                selector.appendChild(option);

            } else {
                <!--myform.removeChild(gift);
                var gel = document.getElementById('gift');
                if (gel) {
                    myform.removeChild(gel);
                }

            }
        }

    </script>
  </head>

  <body>

<form action="" method="get" name="myform">
    <SELECT id="s" name="s" size=3 onChange="createtext()">
        <OPTION>Visa Card</OPTION>
        <OPTION>Mastercard</OPTION>
        <OPTION>American Express</OPTION>
    </SELECT>
</form>

  </body>

</html>


函数createtext（）{
var var1=document.getElementById（'s'）；
var var2=var1.0值；
if（var2==“美国运通”）{
var选择器=document.createElement（'select'）；
selector.id='gift'；
selector.name='gift'；
selector.size='2'；
myform.appendChild（选择器）；
var option=document.createElement（'option'）；
option.value='0'；
option.appendChild（document.createTextNode（“礼品卡”）；
选择器.appendChild（选项）；
option=document.createElement（'option'）；
option.value='1'；
option.appendChild（document.createTextNode（“完全拥有的卡”）；
选择器.appendChild（选项）；
}否则{
假设您定义了gift
某个我在问题中看不到的地方
删除所有子元素
var gift = document.getElementById("gift");
while (gift.firstChild) {
    gift.removeChild(gift.firstChild);
}

或者另一种方法是简单地将innerHTML分配给空字符串
var gift = document.getElementById("gift");
gift.innerHTML = '';

首先，您必须记住，每个浏览器都有自己的js编译器。有些浏览器可以使用属性，而无需通过js获取浏览器dom元素，只需引用其名称即可。但为了编写所有浏览器支持的代码，您必须记住js规范。
在当前的示例中，在尝试对元素执行任何操作之前，必须始终获取元素
      var myform = document.getElementById('myform');
      var gift = document.getElementById('gift');

旁注，您的HTML无效。myform.removeChild（礼品）中定义的礼品在哪里

？你发布的链接对我来说很好，但我没有注意到你的问题…它很好用哪种浏览器？在ChromenerMind中似乎很好，我刚刚尝试了firefox，我明白你的意思：）谢谢-这让它在firefox中工作得很好，在Chrome中也能工作。不过，我无法让它在IE中工作，直到版本9，这是最新版本我们有最新的版本。在那些版本的IE中，我甚至可以让appendChild工作。我想我可能可以忽略IE8及以下版本，但它至少应该在IE9及以上版本中工作。它在你的IE版本中工作吗？@PaulCompton这可能是因为你的html是InvlaIt不能太无效的-它甚至可以在我的iPhone上工作！这就是FF、Chrome和Safari还好，我同意这显然是“无效的”对于IE，但问题当然是它是如何无效的？@PaulCompton在您的标记中，

开始标记丢失了一些海报提到礼物没有定义，但我假设selector.name='gift'；是什么定义了它。那么在代码中的什么位置以及应该如何定义它呢？@PaulCompton-这是不同的..您有但是当你说removeChild（礼物）时它是一个变量，不是选择器。谢谢。您的意思是我应该在尝试removeChild之前获取这些元素吗？是的，您必须通过所有浏览器支持获取指向这些元素的指针func

getElementById

。或者简单地添加对jQuery的引用，它已经实现了所有跨浏览器功能。