代码之家 › 专栏 › 技术社区 › anjanesh

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

jquery javascript

anjanesh · 技术社区 · 8 年前

我有一个jQuery one行程序,我正试图将其转换为普通的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);

1 回复 | 直到 8 年前

tao 8 年前

用香草语写这句话最简单的方法是:

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

…我想。(显然, nodes 和 index 可以重命名为1个字母的变量名,可以删除空格,但这不是重点)。

顺便说一下,正如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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前