removeChild работает только один раз

-3

У меня есть тестовая форма ввода, в которой создается дочерний блок выбора в зависимости от значения одного из вариантов в поле выбора родителя. При выборе любого из других вариантов в поле выбора родителя следует удалить дочерний элемент. Он работает, но только один раз. Если дочерний блок выбора создается второй раз, он не удаляется, выбирая один из других вариантов.removeChild работает только один раз

Вот код:

<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>

А вот это в действии ... http://www.crazyforstamps.com/test-form-6.htm

источник

2013-09-17 Paul Compton

Боковое примечание, ваш HTML недопустим. Где подарок, определенный в 'myform.removeChild (gift)'? – j08691

Ссылка, которую вы опубликовали, отлично работает для меня – DVM

Я не вижу вашей проблемы ... Он хорошо работает – Aelios

Попробуйте

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

Update:

<!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>

Demo: Plunker

источник

2013-09-17 13:27:47

Спасибо, что он отлично работает в Firefox, а также работает в Chrome. Я не могу заставить его работать в IE, но до версии 9, которая является последней, что у нас есть. В тех версиях IE я могу даже заставить appendChild работать. Я думаю, что я могу, возможно, просто игнорировать IE8 и ниже, но он должен хотя бы работать в IE9 и выше. Он работает в вашей версии IE? –

@PaulCompton это может быть потому, что ваш html invlaid –

Он не может быть слишком недействительным - он даже работает на моем iPhone! Так что это FF, Chrome и Safari все в порядке. Я согласен, что это явно недействительно для IE, но вопрос, конечно, в том, как он недействителен? –

Предполагая, что вы определили gift, где-то, что я не вижу в вопросе.

Удаление всех дочерних элементов

var gift = document.getElementById("gift"); 
while (gift.firstChild) { 
    gift.removeChild(gift.firstChild); 
}

Или другой альтернативы просто присвоить innerHTML в пустую строку

var gift = document.getElementById("gift"); 
gift.innerHTML = '';

источник

2013-09-17 13:35:24 Krishna

В нескольких плакатах упоминается, что подарок не определен, но я предполагал, что selector.name = 'gift'; это определило его. Итак, где в коде и как именно он должен быть определен? –

@PaulCompton - это другое .. вы определили ** selector **, но когда вы говорите removeChild (подарок), это переменная, а не селектор. – Krishna

Прежде всего вы должны иметь в виду, что каждый браузер имеет свой собственный js компилятор. Некоторые из них могут использовать свойства, не получая элементы браузера dom через JS, просто ссылаясь на их имя. Но чтобы написать все поддерживаемые браузером коды, вы должны иметь в виду спецификации JS. В вашем текущем примере на JSFiddle вы должны всегда получать свои элементы, прежде чем пытаться выполнять какие-либо действия над ними.

 var myform = document.getElementById('myform'); 
     var gift = document.getElementById('gift');

источник

2013-09-17 13:40:57

Спасибо.Вы имеете в виду, что я должен получить эти элементы непосредственно перед попыткой removeChild? –

Да, вы должны получить указатель на эти элементы через всю поддержку браузера func 'getElementById'. Или просто добавьте ссылку на jQuery, она уже реализовала всю кросс-браузерную функциональность. –

removeChild работает только один раз

ответ

Смежные вопросы