Home > Developer > Web Develop
jquery is also very convenient for DOM document operation, this article mainly discusses the use of jquery to delete the section in the HTML document
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/43/CA/wKioL1Pcm4mwEHMHAADfd5AaLfM627.jpg "title=" Screenshot from 2014-08-02 15:58:42.png "alt=" Wkiol1pcm4mwehmhaadfd5aalfm627.jpg "/>
For example, because the number of emergency phone calls is indeterminate, you need to be able to add and remove them flexibly, so you need to use jquery to manipulate the nodes.
The code in the attachment, can be executed normally, here is just the addition and deletion of the node part of the code, and other similar operations can be modified on this basis can be implemented.
The main code is shown below, primarily the last jquery code, which is noted to refer to jquery for normal execution:
<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>
<body>
<div class= "Clear" style= "padding:15px;" >
<span style= "margin-left:15px;" > Emergency Phone </span>
<input class= "Fl-r" type= "button" value= "Add" onclick= "Addjjdh ()"/>
</div>
<div style= "margin-left:40px;margin-top:20px;" id= "LXDH" >
<div style= "padding:10px;" >
<span style= "margin-top:20px;" > Emergency phone 1:</span><input name= "Emgcall" class= "JJDH" type= "text"/>
<a href= "#" src= "" alt= "Delete"/></a>
</div>
</div>
</body>
<script>
function Addjjdh () {
var n= $ (". Jjdh"). Size () + 1;
$ ("#lxdh"). Append (' <div style= ' padding:10px; > ' +
' <span style= ' margin-top:20px; > Emergency phone ' + n + ': </span><input name= "Emgcall" class= "JJDH" type= "text"/> ' +
' <a href= ' # "src=" ${pagecontext.request.contextpath}/houtai/images//cross.png "alt=" Delete "/></a></div > ');
}
function Deletejjdh (node) {
$ ("#lxdh >div:last-child"). Remove ();
}
</script>
This article is from the "wave-by-stream" blog, be sure to keep this source http://cnhadjb.blog.51cto.com/5274430/1534190
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
