Question

我有一个jQuery单一代码集，我正尝试将其转换为普通JavaScript。

$('#nav ul li:' + (dir == -1 ? 'last' : 'first')).remove();

这有效。但是我需要5行来替换jQuery的一行吗？

var li = document.querySelectorAll('#nav ul li');
var first = li[0];
var last = li[li.length- 1];
theParent = document.querySelector("#nav ul");
theParent.removeChild(dir == -1 ? last : first);

Answer 1

用香草写的最简单的方法是：

var nodes = document.querySelectorAll("#nav ul li"),
    index = -1 == dir ? nodes.length-1 : 0;
nodes[index].parentElement.removeChild(nodes[index]);

...方法。（显然，nodes和index可以重命名为1个字母的var名称，并且可以删除空格，但这不是重点。）

顺便说一句，正如q注释中指出的那样，当<li>中有两个或更多<ul>时，您的版本不会删除正确的#nav

测试：

// comment/uncomment this to test:
let dir = 1;

var nodes = document.querySelectorAll("#nav ul li"),
    index = -1 == dir ? nodes.length-1 : 0;
nodes[index].parentElement.removeChild(nodes[index]);

<nav id="nav">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  <ul>
    <li>fourth</li>
    <li>fifth</li>
    <li><ul>
      <li>sixth</li>
      <li>seventh</li>
    </ul></li>
  </ul>
</nav>

removeChild-删除第一个或最后一个节点

1 个答案: