动态生成标签和删除_动态链接转化为标签-CSDN博客

本文链接：https://blog.csdn.net/Super_Gods/article/details/49590889

动态生成标签和删除
相对繁琐

<!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>无标题文档</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
.x1{
    width:80px;
    height:30px;
    background:#666;
    text-align:center;
    float:left;
    margin-right:10px;
}
#cx{
    width:300px;
    height:0px;

}
    #item1,#item2,#item3{
    width:300px;
    height:30px;
    }
</style>
<script>
$(function(){

        var as =$("#item1 a");
        as.click(function(){
            var anr=$(this).text();    
            var bq="<div class='x1' id='s1'>"+anr+"<button type='button' id='fd'>X</button></div>";
            $("#cx").append(bq);             
            $("#item1").hide();    
            $("#fd").click(function (){
            $("#s1").remove();
            $("#item1").show();    
        });
          });



        var as2 =$("#item2 a");
        as2.click(function(){
            var anr2=$(this).text();   
            var bq2="<div class='x1'  id='s2'>"+anr2+"<button type='button' id='fd1'>X</button></div>";
            $("#cx").append(bq2);            
            $("#item2").hide();        
            $("#fd1").click(function (){
            $("#s2").remove();
            $("#item2").show();    
        });
          });

        var as3 =$("#item3 a");
        as3.click(function(){
            var anr3=$(this).text();   
            var bq3="<div class='x1' id='s3'>"+anr3+"<button type='button' id='fd2'>X</button></div>";
            $("#cx").append(bq3);            
            $("#item3").hide();    
            $("#fd2").click(function (){
            $("#s3").remove();
            $("#item3").show();    
        });
          });



});
</script>
</head>

<body>
<div id="content">
<div id="cx">
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
<div id="item1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<div id="item2">
<a href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
</div>
<div id="item3">
<a href="#">x</a>
<a href="#">y</a>
<a href="#">z</a>
</div>
</div>
</body>
</html>