Jquery dynamically adds and deletes a div
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> Add And Close Div </title>
<Script type = "text/javascript tutorial">
$ (Document). ready (function (){
BindListener ();
})
Function addimg (){
$ ("# Mdiv "). append ('<div class = "iptdiv"> <input type = "file" name = "img []" class = "ipt"/> <a href = "#" name = "rmlink"> X </a> </div> ');
// Add an event listener for the new element node
BindListener ();
}
// Used to bind events (use unbind to avoid repeated binding)
Function bindListener (){
$ ("A [name = rmlink]"). unbind (). click (function (){
$ (This). parent (). remove ();
})
}
</Script>
</Head>
<Body>
<Form action = "" method = "post" enctype = "multipart/form-data">
<Label> select the uploaded image. </label>
<A href = "javascript: addimg ()" id = "addImg"> Add an image www.111cn.net </a>
<Div class = "mdiv" id = "mdiv">
<Div class = "iptdiv"> <input type = "file" name = "img []" class = "ipt"/> <a href = "#" name = "rmlink "> X </a> </div>
</Div>
<Input type = "submit" name = "submit" value = "upload image"/>
</Form>
</Body>
</Html>
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
