Question

我尝试删除第一个li节点，但我必须运行deleteNode();两次才能删除该节点。

我需要移除li标记和img内的标记...

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 这是纯javascript我不能使用jQuery或任何其他js框架。如何仅在li一次运行时删除Node.removeChild()代码？

Answer 1

请使用firstElementChild，因为firstChild正在返回文字：

window.onload=deleteNode();

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

FIDDLE

Answer 2

如果您要删除 #sliders 的第一个LI子项，则以下内容适用于所有浏览器：

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

在更现代的浏览器中（可能甚至是IE8）：

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

上述方法精确地针对第一个LI，它们不依赖于特定的DOM结构。要使用原始代码并确保LI是第一个子代，请将标记更改为：

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

现在UL和LI之间没有文本节点。

Answer 3

这是因为文本也是浏览器中的密集节点

使用函数检查节点类型

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

一次性通话的工作演示：

＆＃13;

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));
}

＆＃13;

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

＆＃13;

Answer 4

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

这可行，因为您的第一个孩子不是 li ，而是文字

Answer 5

您也可以使用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;
        }
    }
}

for循环遍历子节点并删除第一次出现的子元素。这是演示...... http://jsfiddle.net/5apt39yd/3/

的小提琴

需要运行两次Node.removeChild（）以删除节点

5 个答案: