Maison >interface Web >js tutoriel >jQuery implémente l'ajout et la suppression dynamiques d'un div_jquery

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

WBOYoriginal: 2016-05-16 15:45:351416parcourir

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>

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");
})

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comparaison de l'utilisation de la méthode d'appel et de la méthode d'application dans les connaissances JavaScript_BasicArticle suivant：Comparaison de l'utilisation de la méthode d'appel et de la méthode d'application dans les connaissances JavaScript_Basic

Articles Liés

Voir plus