HTML代碼

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

和我想要的功能ioAddSetOtherRelation去除標籤的JavaScript去除孩子

JavaScript代碼

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

當我按下鏈接，第一次，什麼發生，但當我按兩次它刪除一個標記，我想刪除一個點擊標記

來源

2012-05-11 William Kinaan

你有沒有試過將子元素設置爲變量，然後使用remove（）呢？ – atmd

是的，我試過了，它是一樣的 –

與您發佈的代碼的問題是，你的「禮」元素的第一個孩子實際上是一個textNode，它包含自身和'a'元素之間的換行符和空格。第一次點擊時，這個不可見的textNode被刪除，第二次點擊'a'被刪除。

您可以通過刪除換行符和空白符號（即將所有HTML放在一行中不含空格）來證明這一點 - 您應該在第一次單擊時看到'a'消失。

我發現下面的修改後的JavaScript按照你的意圖工作。注意我使用了.getElementsByTagName（）來確保只返回'a'元素。這將返回一個類似.childNodes的數組，所以我正在獲取結果數組的第一個元素。

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

我發現螢火是在（與console.debug一起（）的JS代碼行）解決這一問題是非常有用的 - 如果你還沒有使用，我建議你給它一個去！

來源

2012-05-11 08:51:12 Jon

由於昆汀ranganadh指出，將'a'元素本身作爲參數傳遞是比我在上面發佈時試圖找到它更明智的方法。 – Jon

謝謝你，你讓我明白瞭解決方案，它的工作原理就像你說的，我接受你的答案，謝謝 –

我的榮幸，感謝你接受我的回答，並讓我的代表離開現場，最後我可以投票給其他人:-) – Jon

第一次單擊時刪除了包含元素前面空格的文本節點。您需要確保您傳遞給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會更好。

來源

2012-05-11 08:34:32 Quentin

是的人，你一個，它的工作原理，非常感謝你，我會接受7分鐘後的答案 –

使用jQuery和發送的this

參數以在ioAddSetOtherRelation功能this

檢查它here

來源

2012-05-11 08:38:03

總是解決我的問題是使用jQuery :)謝謝 –

的JavaScript去除孩子

HTML代碼

JavaScript代碼

回答

相關問題