需要運行兩次Node.removeChild（）用於刪除節點

我試圖刪除第一個li節點，但我必須運行deleteNode();兩次才能刪除該節點。需要運行兩次Node.removeChild（）用於刪除節點

我需要刪除li標籤和img標籤內...

window.onload = function() { 
 
    deleteNode(); 
 
    deleteNode(); 
 
} 
 

 

 
function deleteNode() { 
 
    var node; 
 
    node = document.getElementById("sliders"); 
 
    node.removeChild(node.firstChild); 
 
}

<body> 
 
    <div id="jsSlider"> 
 
    <div class="slider-wrapper"> 
 
     <ul id="sliders"> 
 
     <li> 
 
      <img src="img/sample-1.jpg" alt="" /> 
 
     </li> 
 
     <li> 
 
      <img src="img/sample-2.jpg" alt="" /> 
 
     </li> 
 
     <li> 
 
      <img src="img/sample-3.jpg" alt="" /> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div id="prueba"></div> 
 
</body>

這是純JavaScript我不能使用jQuery或任何其他JS framwork。如何刪除 li標籤，同時只運行 Node.removeChild()一次？在的browers

來源

2014-12-30 omixam

'node.removeChild（node.children [0]）;' –

@ SampathLiyanage - 根據[* MDN *]（https://developer.mozilla.org/en- US/docs/Web/API/ParentNode.children＃Browser_compatibility），* children *的支持有限。 – RobG

與論壇網站不同，我們不使用「謝謝」或「任何幫助表示讚賞」，或在[so]上簽名。請參閱「[應該'嗨'，'謝謝'，標語和致敬從帖子中刪除？]（http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be - 刪除 - 從帖子）。順便說一句，它是「預先感謝」，而不是「先進的感謝」 –

使用firstElementChild而是因爲firstChild將返回文本：

window.onload=deleteNode(); 

function deleteNode() { 
    var node; 
    node = document.getElementById("sliders"); 
    node.removeChild(node.firstElementChild); 
}

FIDDLE

來源

2014-12-30 05:16:48 jmore009

根據[* MDN *]（https://developer.mozilla.org/en-US/docs/Web /API/ParentNode.firstElementChild），對* firstElementChild *的支持是有限的 – RobG

完美地工作......謝謝... – omixam

這是監守文本也considired節點

使用一個函數來檢查節點的類型

function getFirstchild(elem) { 
    do { 
     elem = elem.firstChild; 
     } 
    while (elem && elem.nodeType !== 1); 
return elem; 
    }

工作有一個時間的呼叫演示：

window.onload = function() { 
 
    deleteNode(); 
 

 
} 
 

 
    function getFirstchild(elem) { 
 
    do { 
 
     elem = elem.firstChild; 
 
     } 
 
    while (elem && elem.nodeType !== 1); 
 
return elem; 
 
    } 
 
    
 
function deleteNode() { 
 
    var node; 
 
    node = document.getElementById("sliders"); 
 
    node.removeChild(getFirstchild(node)); 
 
}

<body> 
 
    <div id="jsSlider"> 
 
    <div class="slider-wrapper"> 
 
     <ul id="sliders"><li> 
 
      <img src="img/sample-1.jpg" alt="" /> 
 
     </li><li> 
 
      <img src="img/sample-2.jpg" alt="" /> 
 
     </li><li> 
 
      <img src="img/sample-3.jpg" alt="" /> 
 
     </li></ul> 
 
    </div> 
 
    </div> 
 

 
    <div id="prueba"></div> 
 
</body>

來源

2014-12-30 05:14:47

function deleteNode() { 
    var node; 
    node = document.getElementById("sliders"); 
    node.removeChild(node.childNodes[1]); 
    }

這將作爲您則firstChild不李但文本

來源

2014-12-30 05:18:27 Tweety01

除非在UL和LI之間有零個或兩個或多個文本節點;-) – RobG

如果你想刪除第一個LI子＃滑行者，那麼下面將在所有的瀏覽器：

var ul = document.getElementById('sliders'); 
ul.removeChild(ul.getElementsByTagName('li')[0]);

更現代的瀏覽器（甚至可能IE8）：

var firstLi = document.querySelector('#sliders li'); 
firstLi.parentNode.removeChild(firstLi);

上述方法精確定位的第一李，他們不依賴於一個特定的DOM結構。要使用你原來的代碼，並確保LI是第一個孩子，標記更改爲：

<ul id="sliders"><li> 
     <img src="img/sample-1.jpg" alt=""> 
     </li>

現在有UL和李之間沒有文本節點。

來源

2014-12-30 05:28:19 RobG

你可以使用children以及：

window.onload=deleteNode(); 

function deleteNode() { 
    var node; 
    node = document.getElementById("sliders"); 
    node.removeChild(node.children[0]); 
}

IMG是#sliders DIV的一個要素，因此.children，甚至.firstElementChild用於訪問的IMG;一個子元素。

但是，.childNodes計算#sliders div的任何類型的屬性，這意味着甚至可以計算li標籤之間的空格......這是問題的根源。

**編輯

似乎.children和.firstElementChild具有IE瀏覽器和Safari瀏覽器支持有限，如果這是一個問題，請嘗試以下操作：

window.onload=deleteNode(); 

function deleteNode() { 
    var node; 
    var elem; 
    node = document.getElementById("sliders"); 
    for (elem = node.firstChild; 
     elem; 
     elem = elem.nextSibling 
     ) { 

     if (elem.nodeType == 1) { // 1 == Element 
      node.removeChild(elem); 
      break; 
     } 
    } 
}

的通過孩子循環迭代和刪除第一個出現的元素是子元素。這裏有一個演示... http://jsfiddle.net/5apt39yd/3/

來源

2014-12-30 05:28:22 Bolboa

與* children *，* firstElementChild *支持有限（請參閱[* MDN *]（https://developer.mozilla.org/en-US/docs/Web/API/ParentNode.firstElementChild#Browser_compatibility））。 – RobG

正確的，在IE中，例如，評論節點似乎被算作元素節點，這對於OP來說可能是也可能不是一個重要問題 – Bolboa

需要運行兩次Node.removeChild（）用於刪除節點

回答

相關問題