任务目的：

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

掌握到了：

这里是主要学习到了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. JMeter入门：Java Request实例 （转）

    转自:http://blog.csdn.net/czp11210/article/details/26174969 目的:对Java程序进行测试:   一.核心步骤   1.创建一个Java工程: 2 ...

  2. 腾讯云-Linux 基础入门

    Linux 基础入门 目录操作 任务时间:5min ~ 10min 创建目录 使用 mkdir 命令创建目录 mkdir $HOME/testFolder # $HOME 当前用户的家目录  root ...

  3. 由select/epoll返回的非阻塞connect还会是EINPROGRESS状态吗？

    一般情况下,我们像下面代码中所示的这样使用非阻塞connect: #include <stdio.h> #include <stdlib.h> #include <str ...

  4. cout printf 莫明奇妙的崩溃问题

    出现异常主要表现 导致异常的关键代码不是因为printf 或cout,而是因为使用栈空间超出的原因 下图试图在栈上分配1024000个char的空间,确发现崩溃 的位置是printf,这就是这个问题难 ...

  5. HOJ 1402 整数划分

    HOJ1402 整数划分 http://acm.hit.edu.cn/hoj/problem/view?id=1402 [题目描述] 整数划分是一个经典的问题.希望这道题会对你的组合数学的解题能力有所 ...

  6. Google C++单元测试框架

    一.概述 Google C++单元测试框架(简称Gtest),可在多个平台上使用(包括Linux, Mac OS X, Windows, Cygwin和Symbian),它提供了丰富的断言.致命和非致 ...

  7. Linux-Tmux使用初体验

    Tmux使用初体验 tmux #开启tmux tmux ls #显示已有tmux列表(ctrl+b s) tmux attach-session -t 数字 #选择tmux ctrl+b c 创建一个 ...

  8. TransactionScope事务处理方法介绍及.NET Core中的注意事项 SQL Server数据库漏洞评估了解一下 预热ASP.NET MVC 的VIEW [AUTOMAPPER]反射自动注册AUTOMAPPER PROFILE

    TransactionScope事务处理方法介绍及.NET Core中的注意事项   作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/10170712.ht ...

  9. PLSQL_自治事务和嵌套事物的理解和用法（案例）

    2014-06-01 Created By BaoXinjian

  10. PO_从PO追溯PR的方式和表（分析）

    2014-06-03 Created By BaoXinjian