javascript-删除节点

任务目的:

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

掌握到了:

这里是主要学习到了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>
时间: 2024-10-03 22:25:10

javascript-删除节点的相关文章

javascript删除一个html元素节点代码实例

javascript删除一个html元素节点代码实例:本章节介绍一下如何利用原生javascript实现删除一个指定的html元素.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

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

1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添加到一个如下所示的列表中 <ul id = "fruit"> <li>苹果</li> <li>橘子</li> <li>西瓜</li> <li>梨</li> </ul> 可

JavaScript DOM编程 学习笔记-删除节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //测试removeChild()方法  删除节点 window.onload = function() { //alert(1

Javascript 笔记与总结(2-10)删除节点,创建节点

[删除节点] 步骤: ① 找到对象 ② 找到他的父对象 parentObj ③ parentObj.removeChild(子对象); [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; heigh

jQuery插入,复制、替换和删除节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuer

js 访问,插入,替换,创建,删除节点介绍

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性.语法:elementNode.childNodes注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList. 注意:1. IE全系列.firefox.chrome.opera.safari兼容问题2. 节点之间的空白符,在firefox.chrome.opera.safari浏览器是文本节点,所以IE是3,其它浏览器是7, 访问子节点的第一和最后项一.firstChild 属性返回'chi

添加删除节点

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js"></scri

删除节点removeChild()

http://www.imooc.com/code/1700 删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL. 语法: nodeObject.removeChild(node) 参数: node :必需,指定需要删除的节点. 我们来看看下面代码,删除子点. 运行结果: HTML 删除节点的内容: javascript 注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存

remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点

<html> <head> <title></title> <script src="jquery-2.1.3.js"></script> </head> <body> <div> <ul> <li>中国</li> <li>美国</li> <li>德国</li> <li>俄国</

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

效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../Scripts/zTree/js/jquery-1.4.4.min.js"></script> <script src