Javascript удалить ребенок

Question

HTML код

<li id="ioAddOtherRelation"> 
      <a href="" onclick="return ioAddSetOtherRelation()"class="smallLink">add other relation</a> 
</li> 

и я хочу, чтобы функция ioAddSetOtherRelation удалить тег

Javascript код

function ioAddSetOtherRelation(){ 
    var bigLi = document.getElementById('ioAddOtherRelation'); 
    bigLi.removeChild(bigLi.childNodes[0]); 
    return false; 
} 

, когда я нажимаю ссылку в первый раз, ничего happend, но когда я нажимаю его дважды, он удаляет тег, я хочу удалить тег одним щелчком мыши

Answer 1

Проблема с кодом вас в курсе, что первый ребенок вашего элемента «LI» фактически является текстовымNode, содержащим новую строку и пробел между собой и элементом 'a'. При первом нажатии этого невидимого текстового поля удаляется, а второй раз, когда вы нажимаете «a», удаляется.

Вы можете продемонстрировать это, удалив новую строку и пробел (т. Е. Поместите все HTML на одну строку без пробелов) - вы должны увидеть, что «a» исчезает при первом щелчке.

Я обнаружил, что следующий измененный javascript работал так, как вы планировали. Примечание. Я использовал .getElementsByTagName(), чтобы убедиться, что возвращаются только элементы 'a'. это вернет массив вроде .childNodes, поэтому я беру первый элемент результирующего массива.

  function ioAddSetOtherRelation() { 
      var bigLi = document.getElementById('ioAddOtherRelation'); 
      bigLi.removeChild(bigLi.getElementsByTagName("a")[0]); 
      return false; 
     } 

Я нашел FireBug быть очень полезным в решении этой проблемы (вместе с console.debug() строки в коде JS) - если вы не используете, что я рекомендовал бы дать ему идти!

Answer 2

При первом щелчке вы удалили текстовый узел, содержащий пространство перед элементом. Вы должны убедиться, что аргумент, который вы передаете removeChild, является тем, который вы действительно хотите.

Это было бы разумнее подход к проблеме:

<li id="ioAddOtherRelation"> 
    <a href="" onclick="return ioAddSetOtherRelation(this)" class="smallLink">add other relation</a> 
</li> 

function ioAddSetOtherRelation(element){ 
    var bigLi = element.parentNode; 
    bigLi.removeChild(element); 
    return false; 
} 

Избавление от собственного атрибута события и писать unobtrusive JavaScript бы еще лучше.

Answer 3

Используйте JQuery и отправить параметр, как this

Получай this в функции ioAddSetOtherRelation

Проверить это here