任务目的：

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

掌握到了：

这里是主要学习到了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. 【J2EE之web应用】java集群概念

    在学习web应用进行部署的时候,遇到一个名词java集群,(事实上遇到非常多名词╭(╯^╰)╮~~~).不懂意思就查一查! 在这里做个笔记! 没有什么高深见解,就搞明确几个概念,java集群的特点 . ...

  2. 用Canvas为网页加入动态背景

    近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...

  3. HDUOJ---1233还是畅通工程

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  4. HDUOJ ---悼念512汶川大地震遇难同胞——来生一起走

    悼念512汶川大地震遇难同胞——来生一起走 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. HDUOJ----(1016)Prime Ring Problem

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. 【C++】int与string互转

    int转string(注:itoa不是标准函数,OJ平台可能不接受) ; ]; string str; sprintf(temp, "%d", n); str = temp; or ...

  7. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战：构建带有版本控制的 API 接口 ASP.NET Core 实战：使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  8. 摘：用ADO操作数据库的方法步骤

    用ADO操作数据库的方法步骤 ADO接口简介 ADO库包含三个基本接口:_ConnectionPtr接口._CommandPtr接口和_RecordsetPtr接口. _ConnectionPtr接口 ...

  9. Android 自定义属性动画&Camera动画

      摘要: Android 自定义属性动画&Camera动画 1.相关知识点 对于Androi的帧动画,可以制作gif图片,有时为了能够动态的生成帧动画,就得需要使用代码构建了 Animati ...

  10. mysql 5.7安装教程

    一.mysql下载地址  https://downloads.mysql.com/archives/installer/ 说在前面的话 我为什么已经尝试和使用过同类型产品的很多MySQL版本,还要书写 ...