使用jquery增加、删除html文档节点

jquery相对亦js来说在对DOM文档操作来说非常方便,本文主要讨论使用jquery对html文档中节的删除

如上图,因为是急救电话数量是不确定的,因此需要能够灵活地添加和删除,因此就需要用jquery来对节点进行操作。

代码在附件中,可以正常执行,这里只是对节点的增加和删除中部分代码,其他类似操作可以在此基础上进行修改操作既可以实现。

主要代码如下所示,主要是最后的jquery代码注意要引用jquery才可正常执行的:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
    
    <div class="clear" style="padding:15px;">
        <span style="margin-left:15px;">急救电话</span>
        <input class="fl-r" type="button" value="添加" onClick="addJJDH()"/>
   </div>
    <div style="margin-left:40px;margin-top:20px;" id="lxdh">        
        <div style="padding:10px;">
            <span style="margin-top:20px;">急救电话1:</span><input name="emgcall" class="jjdh" type="text" />
            <a href="#"  src="" alt="删除" /></a>
        </div>
     </div>
</body>
      <script>
         function addJJDH(){
             var n= $(".jjdh").size() + 1;
             $("#lxdh").append(‘<div style="padding:10px;">‘ +
                      ‘<span style="margin-top:20px;">急救电话‘+ n + ‘:</span><input name="emgcall" class="jjdh" type="text" />&nbsp;‘ +
                      ‘<a href="#"  src="${pageContext.request.contextPath}/houtai/images//cross.png" alt="删除" /></a></div>‘);
         }
         
         function deleteJJDH(node){
           $("#lxdh>div:last-child").remove();
         }
    </script>
</html>

使用jquery增加、删除html文档节点,布布扣,bubuko.com

时间: 2024-08-05 06:49:32

使用jquery增加、删除html文档节点的相关文章

java中XML操作:xml与string互转、读取XML文档节点及对XML节点增删改查

一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = DocumentHelper.parseText(xmlStr); // XML转字符串 Document document = ...; String text = document.asXML(); //这里的XML DOCUMENT为org.dom4j.Document 二.读取XML文档节点: pack

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

PDF文件怎么编辑攻略:删除PDF文档水印或添加水印

PDF 文档不像Word文档,它具有不易编辑的特点,因此编辑PDF文档是需要专门的软件的.迅捷PDF编辑器就是一款专门编辑PDF文档的办公软件,操作十分简单,功能却很全面. 一.删除水印 1.运行迅捷PDF编辑器,然后用鼠标左键选中需要删除水印的PDF文档,然后拖拽到软件的界面中,就可以在软件中打开文件了. 2.然后按照"文档--水印--管理"的步骤进行操作,进入管理水印的界面. 3.在管理水印的界面中,你可以选中你想要删除的水印,然后单击"移除"即可删除水印. 4

批量删除wps文档里的回车符的方法!WPS使用技巧分享!

有时候整理文档的时候,如果是从网上复制的文字,可能会因为复制而产生很多的回车符.怎样能批量去掉这些个回车符呢,下面马上告诉你批量删除wps文档里的回车符的方法!WPS使用技巧分享! 想要批量删除批量删除wps文档里的回车符,我们首先要了解回车符的种类!WPS文字或者Word中的回车符分为两种:一种为自带的回车符,一种为网络文件产生的回车符,称之为换行符. 1.批量删除wps文档里的回车符方法如下: 编辑--> 替换--> 替换-->高级-->特殊字符-->选择段落标记--&g

BOM小结以及文档节点基础

在之前学习过程中,由于某些原因,先去看了DOM相关,而略过了BOM,在昨天终于是把BOM这部分补上. BOM的概念就不多说,BOM的核心是window对象,window对象定义了3个[alert(),confirm(),prompt()]人机交互的接口方法方便开发人员进行调试. 其中alert()包含一个可选的提示信息参数,用于向用户弹出提示性信息. confirm()包含两个按钮(确定与取消)如果点击"确定"则该方法返回true:点击"取消"则该方法返回false

Java 添加、读取、删除Excel文档属性

在文档属性中,可以设置诸多关于文档的信息,如创建时间.作者.单位.类别.关键词.备注等摘要信息以及一些自定义的文档属性.下面将通过Java程序来演示如何设置,同时对文档内的已有信息,也可以实现读取和删除等操作. 示例大纲: 1. 添加文档属性 1.1 添加摘要信息 1.2 添加自定义文档信息 2. 读取文档属性 3. 删除文档信息 3.1 删除所有摘要信息.自定义文档属性 3.2 删除指定摘要信息.自定义文档属性 使用工具:Spire.XLS for Java 获取方法1:通过官网下载包.下载后

jQuery 样式操作、文档操作、属性操作的方法总结

文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()               向匹配元素集合中的每个元素结尾插入由参数指定的内容.appendTo()           向目标结尾插入匹配元素集合中的每个元素.attr()                     设置或返回匹配元素的属性和值.before()                在每个匹配的元素之前插

jquery.ready可以在文档加载后尽快执行对文档的操作

jquery 1.12.4中ready的关键代码 1 jQuery.ready.promise = function( obj ) { 2 if ( !readyList ) { 3 4 readyList = jQuery.Deferred(); 5 6 // Catch cases where $(document).ready() is called 7 // after the browser event has already occurred. 8 // Support: IE6-1

Java获取XML节点总结之读取XML文档节点

dom4j是Java的XML API,用来读写XML文件的.目前有很多场景中使用dom4j来读写xml的.要使用dom4j开发,需要下载导入dom4j相应的jar文件.官网下载:http://www.dom4j.org/dom4j-1.6.1/github下载:http://dom4j.github.io/下载解压之后如图所示: 我们只需要把dom4j-1.6.1.jar文件构建到我们开发项目中就可以了. 下面就以Eclipse创建java项目的构建方法为例说明:声明:本Java项目的开发环境J