jQuery implementiert das dynamische Hinzufügen und Löschen einer div

jQuery implementiert das dynamische Hinzufügen und Löschen einer div_jquery

WBOY

Freigeben： 2016-05-16 15:45:35

Original

1432 Leute haben es durchsucht

Dieser Artikel gibt Ihnen hauptsächlich eine kurze Einführung in das dynamische Hinzufügen und Löschen eines Div in einem Element, in der Hoffnung, den Effekt zu erzielen, Schlussfolgerungen aus einem Beispiel zu ziehen.

Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Der obige Code kann ein Div zum übergeordneten Div hinzufügen. Als nächstes stellen wir vor, wie man ein Div löscht:

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

Nach dem Login kopieren

Der obige Code kann das hinzugefügte Div entfernen.

Beispiel 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>

Nach dem Login kopieren

Verwandte Lektüre:

1. Informationen zur prepend()-Funktion finden Sie im Kapitel zur prepend()-Methode von jQuery.

2. Informationen zur Funktion „remove()“ finden Sie im Methodenkapitel remove() von jQuery.