事件委托小练习

html部分

<div id="warp">
    <div class="warpDiv">
        <p class="deleteDiv">-</p>
        <p class="toggleShow">+</p>
    </div>
</div>

css部分

<style type="text/css">
    .warpDiv p{display: inline-block;padding:10px;color:#fff;background:rgba(1,1,1,.7);}
</style>

JS部分

<script type="text/javascript">

 $("#warp").click(function(ev){
     var ev = ev || window.event;
　　　var target = ev.target || ev.srcElement;
　　　
　　　
    if(target.className == "toggleShow"){   

        $(target).parents("#warp").append("<div class='warpDiv'><p class='deleteDiv'>-</p> <p class='toggleShow'>+</p></div>");

        $(target).css("display","none");

    }else if(target.className == "deleteDiv"){

　   
        if($(target).next().css("display")=='none'){

            $(target).parent().remove();

        }else{

            if($(target).parent().prev().length!=0){                                                       
                $(target).parent().prev().children(".toggleShow").css("display","inline-block");
                $(target).parent().remove();       
            }
    }


  })

</script>

效果图