任务目的：

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

掌握到了：

这里是主要学习到了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. java常见错误--Access restriction: The type BASE64Encoder

    Access restriction: The type BASE64Encoder is not accessible due to restrict 在Eclipse中编写Java代码时,用到了B ...

  2. Rational Rose 2003 逆向工程转换C++源代码成UML类图

    主要介绍用户如何使用Rose的逆向工程生成UML模型,并用来进行C++代码的结构分析. Rational Rose可以支持标准C++和Visual C++的模型到代码的转换以及逆向工程.下面将详细地说 ...

  3. CreateThread、_beginthreadex和AfxBeginThread .

    创建线程好几个函数可以使用,可是它们有什么区别,适用于什么情况呢?参考了一些资料,写得都挺好的,这里做一些摘抄和整合. [参考1]CreateThread, AfxBeginThread,_begin ...

  4. 在阿里云上进行Docker集群的自动弹性伸缩

    摘要: 在刚刚结束的云栖大会上,阿里云容器服务演示了容器的自动弹性伸缩,能够从容应对互联网应用的峰值流量.阿里云容器服务不仅支持容器级别的自动弹性伸缩,也支持集群节点级别的自动弹性伸缩.从而真正做到从 ...

  5. Nginx中Laravel的配置

    server { listen 80; server_name sub.domain.com; set $root_path '/var/www/html/application_name/publi ...

  6. leetcode719:直线上的第k近点对

    问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...

  7. ios 利用UIScrollView实现图片缩放

    前言:我们希望做出的效果是,实现图片的分页滑动,且每张图片都可以双击或用手指捏合来缩放大小.上一篇讲解UIGestureRecognizer的中,我们介绍的UIPinchGestureRecogniz ...

  8. 通俗易懂，C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中，通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件

    通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二).   前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...

  9. jQuery on() 方法问题

    <!DOCTYPE html><html><head><script src="https://cdn.bootcss.com/jquery/1.1 ...

  10. Python学习笔记020——数据库基本操作

    本数据库的操作是Linux虚拟机平台下进行的 1 启动和链接MySQL服务 1.1 服务端 (1)查看服务状态 sudo /etc/init.d/mysql stauts (2)启动服务端 sudo ...