任务目的：

每点击一下按钮删除一个标签。

掌握到了：

这里是主要学习到了parentNote以及removeChild两个DOM属性。

parentNote:parent英译为父亲，Note英译为节点。顾名思义就是：父节点

removeChild：remove删除，Chinld儿子，顾名思义就是：子节点

在删除某一个节点的时候需要调用其父节点，简单的说就是：只有他爹才能删除它。

代码：

<html>

<head>

    <script>

        function del(){

            var lis = document.getElementsByTagName('li');//返回值为数组

            var lastli = lis[lis.length-1];//获取数组的最后一个值赋值给lastli变量。

            lastli.parentNode.removeChild(lastli);//parent英译为父亲，Node英译为节点。总的就是删除父节点下的lastli子节点。

        }

    </script>

</head>

<input type="button" value="点击我从最后删除li标签" onclick="del();">

    <ul>

        <li>春</li>

        <li>夏</li>

        <li>秋</li>

        <li>冬</li>

    </ul>

<body>

</body>

</html>

javascript-删除节点的更多相关文章

  1. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

  2. javascript数据结构与算法---二叉树（删除节点）

    javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...

  3. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  4. Javascript 笔记与总结（2-10）删除节点，创建节点

    [删除节点] 步骤: ① 找到对象 ② 找到他的父对象 parentObj ③ parentObj.removeChild(子对象); [例] <!DOCTYPE html> <ht ...

  5. JQuery_DOM 节点操作之复制、替换和 删除节点

    一.复制节点 <script type="text/javascript" src="jquery-1.12.3.min.js"></scri ...

  6. 浅析jQuery删除节点的三个方法

    jQuery提供了三种删除节点的方法,即remove(),detach()和empty().测试所用HTML代码:[html] view plaincopy<p title="选择你最 ...

  7. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  8. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  9. 添加和删除节点（HTML 元素）。

    JavaScript HTML DOM 元素(节点)   添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  10. bootstrap jQuery Ztree异步载入数据，check选择&amp;可加入、改动、删除节点

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

随机推荐

  1. glusterFS分布式存储部署流程

    转自:http://bangbangba.blog.51cto.com/3180873/1712061 GlusterFS是一款非常易于使用的分布式文件存储系统,实现了全部标准POSIX接口,并用fu ...

  2. 转:eclipse里面显示中文乱码

    显示中文会变成乱码解决方案:Windows- >Pereferences- >General->Workspace- >Text   File   Encoding   选项下 ...

  3. 深入PHP内核之array_multisort

    这个函数是我第一次看手册的时候,没看明白是怎么回事,所以有必要记录一下 用法 bool array_multisort ( array &$arr [, mixed $arg = SORT_A ...

  4. mybatis映射文件(转)

    以下内容为转载, 格式未调整,略丑,可直接空降至: [Mybatis框架]输出映射-resultType与resultMap 有时间或看: Mybatis 3.1中 Mapper XML 文件 的学习 ...

  5. C plus plus 控制格式

    使用这些格式需要声明包含<iomainip> long flags( ) const 返回当前的格式标志.long flays(long newflag) 设置格式标志为newflag,返 ...

  6. 将jar文件转换成exe可执行文件[转]

    将jar文件转换成exe可执行文件: exe文件使用方便,而且还可以提高源码及资源的安全性,但同时也失去了java的初衷--跨平台性. 如果你坚持要转换成exe文件,请按以下方式进行: 利用exe4j ...

  7. oracle11g本地可以访问但局域网无法访问

    问题描述,现在有两台电脑 A 和 B : 1)电脑 A 上有 Oracle11G服务端: ip地址 192.168.1.198; 端口1521: 2)电脑 A 本机连接数据库正常,可以登录及操作等: ...

  8. python学习笔记——multiprocessing 多进程模块Process

    系统自带的fork模块创建的多进程是基于Linux或Unix平台的,而window平台并不支持: python中的multiprocess为跨平台版本的多进程模块,支持子进程.通信和共享数据.执行不同 ...

  9. oc 中的.m和.mm文件区别

    oc 中的.m 这是objective c语言 oc 中的.mm  这是objective c++语言

  10. 仿&lt;赶集生活&gt;client启动动画效果

    demo下载地址: http://yun.baidu.com/s/1i3wqEMh 由于前几年csdn泄露password的事件,导致我的账号被拿去发广告文章了,联系了管理员帮我把几篇广告文删掉,可是 ...