jQuery implémente l'ajout et la suppression dynamiques d'un div

jQuery implémente l'ajout et la suppression dynamiques d'un div_jquery

WBOY

Libérer： 2016-05-16 15:45:35

original

1415 Les gens l'ont consulté

Cet article vous donne principalement une brève introduction sur la façon d'ajouter et de supprimer dynamiquement un div dans un élément, dans l'espoir d'obtenir l'effet de tirer des inférences à partir d'un exemple.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father div
{
 width:50px;
 height:50px;
 background-color:green;
 font-size:12px;
}
</style>
<script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
})
</script>
</head>
<body>
<div id="father"></div>
</body>
</html>

Copier après la connexion

Le code ci-dessus peut ajouter un div au div parent. Ensuite, nous présenterons comment supprimer un div. Seul le code principal est donné ci-dessous :

$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
 $("div").remove("#father div");
})

Copier après la connexion

Le code ci-dessus peut supprimer le div ajouté.

Exemple 2 :

<!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教程" > 
$(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>'); 
    
    // 为新元素节点添加事件侦听器
    bindListener();
}
// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
    $("a[name=rmlink]").unbind().click(function(){
        $(this).parent().remove(); 
    })
}
</script>
 
</head> 
 <body> 
<form action="" method="post" enctype="multipart/form-data"> 
 <label>请选择上传的图片</label> 
  <a href="javascript:addimg()" id="addImg">增加图片</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="上传图片" /> 
 </form> 
 </body> 
 </html>

Copier après la connexion

Lecture connexe :

1. Pour la fonction prepend(), veuillez vous référer au chapitre sur la méthode prepend() de jQuery.

2. Pour la fonction remove(), veuillez vous référer au chapitre sur la méthode remove() de jQuery.