事件委托小练习

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>

效果图