使用JavaScript删除元素
There are two methods of removing elements from web pages with JavaScript: the traditional, counter-intuitive way, and the new direct DOM4 method.
使用JavaScript从网页中删除元素的方法有两种:传统的,违反直觉的方法和新的直接DOM4方法。
The traditional method is rather round-about: you cannot simply remove an element, but must do so via a reference to its parent. Given the following markup:
传统方法相当复杂:您不能简单地删除元素,而必须通过引用其父元素来删除它。 给定以下标记:
<div id="leftcol"><h1>Yggdrasil Explorer</h1><nav> </nav><p id="description"> Yggdrasil is the "WorldTree" of Norse mythology, a cosmos-spanning ash that connects the nine worlds.</div>
<div id="norsemap"> </div>
If I wanted to remove description
from the DOM, I could do the following.
如果我想从DOM中删除description
,可以执行以下操作。
var description = document.getElementById("description");
description.parentNode.removeChild(description);
This method is bizarrely self-reflective, but it has the advantage of working in every browser. Visually, it has the same effect as setting description
to display: none
in CSS, but of course the element is completely removed from the DOM, not merely hidden.
这种方法具有奇特的自我反省功能,但具有在每种浏览器中均可使用的优势。 视觉上,它具有与设定相同的效果description
于display: none
在CSS ,但当然该元素被完全从移除所述DOM ,不仅隐藏。
The removed element remains as a reference in JavaScript, floating in memory: if I wanted to attach the removed description
to the norsemap
element, I could do the following:
被移除的元素仍保留在JavaScript中,并在内存中浮动:如果我想将被移除的description
附加到norsemap
元素,则可以执行以下操作:
var norsemap = document.getElementById("norsemap");
norsemap.appendChild(description);
An upcoming article will explore more possibilities of this “cut and paste” ability of JavaScript, particularly in how it can be used in responsive design.
即将发表的文章将探讨JavaScript的这种“剪切和粘贴”功能的更多可能性,尤其是如何将其用于响应式设计中。
。去掉() (.remove())
DOM4 provides a far more direct method. Returning to the original code, we can simply use:
DOM4提供了一种更为直接的方法。 回到原始代码,我们可以简单地使用:
var description = document.getElementById("description");
description.remove();
Great, right? There’s just one problem: the method only works on recent browsers (Chrome & Firefox 23+, Opera 10+, and Safari 7+), and not at all in Internet Explorer… not even IE11, at least as of this writing. However, polyfills exist, such as DOM4 & DOMShim.
太好了吧? 只有一个问题:该方法仅适用于最新的浏览器(Chrome和Firefox 23 +,Chrome Opera 10+和Safari 7+),而在Internet Explorer中根本不起作用,甚至在撰写本文时,甚至都不是IE11。 但是,存在polyfill ,例如DOM4和DOMShim 。
翻译自: https://thenewcode.com/947/Removing-Elements-With-JavaScript
使用JavaScript删除元素相关推荐
- JavaScript删除元素removeChild
<!DOCTYPE html> <!-- 作者:hyzhang 时间:2017-10-11 描述:删除元素 --> <html> <head> < ...
- javascript删除元素节点
在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输入框,点击删除就删除对应的输入框.在一些js框架,如Prot ...
- JavaScript删除元素属性
没删除前 执行了如下删除属性方法 $('#ename').removeAttr('readonly') 删除后 已经成功被删除掉属性 readonly 了
- js移除html指定id元素,javascript - 按ID删除元素
javascript - 按ID删除元素 使用标准JavaScript删除元素时,必须首先转到其父级: var element = document.getElementById("elem ...
- Javascript删除JSON元素
为什么80%的码农都做不了架构师?>>> 原文:http://www.javascript100.com/?p=178 首先要搞清JSON的数据格式,我这里所说的JSON都是指 ...
- linux数组删除数据,JavaScript在数组的循环中删除元素
在开发JavaScript应用的过程中,经常会遇到在循环中移除指定元素的需求. 按照常规的思路,就是对数组进行一个for循环,然后在循环里面进行if判断,在判断中删除掉指定元素即可. 但是实际情况往往 ...
- 扩展JavaScript数组(Array)添加删除元素方法
为JavaScript数组(Array)扩展 添加删除元素方法 作者:jcLee95:https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 ...
- js中怎么删除html元素的属性,如何使用JavaScript删除HTML元素?
给定一个HTML元素,如何使用JavaScript从文档中删除该HTML元素?下面本篇文章就来给大家介绍一下使用JavaScript删除HTML元素的方法,希望对大家有所帮助. 如何使用JavaScr ...
- javascript删除数组元素的几个方法
javascript删除数组元素的7个方法 文章目录 一.length属性 二.delete关键字 三.pop()栈方法 四.shift()队列方法 五.splice()操作方法 六.迭代方法 七.p ...
最新文章
- LeetCode14.最长公共前缀 JavaScript
- 2021年春季学期-信号与系统-第三次作业参考答案-第一道题
- Rise of Shadows 闰年leap year-无法线性筛
- Java多线程(6)--Callable接口创建线程
- Firewall配置
- cls_template.php on line 1072,博客 – 联发多彩网页技术博客
- 马拉车(manacher)算法——最长回文(hdu3068)
- 会玩!“代吃代喝”服务火了 这又是什么花里胡哨的操作?
- 为什么 C 语言仍然占据统治地位?
- python实验报告_20183122 实验一《Python程序设计》实验报告
- 洛谷2805 [NOI2009]植物大战僵尸 (拓扑排序+最小割)
- 苹果耳机无线真假测试软件,辨别苹果耳机真伪,看完这篇就够了
- Android使用google breakpad之minidump_stackwalk
- STM32压力传感器信号采集-24位AD HX720 HX711 CS5530 CS5532 C#上位机
- unity3d工程Plugin文件夹笔记
- 计算机相关扩展活动战队名字,有诗意的战队名字大全
- golang中的错误fatal error: concurrent map writes
- echarts结合amap (echarts-extension-amap)
- acme + acme-dns + google domains 签发泛域名证书
- 微信开发之data:image/png;base64,