如何单独删除动态创建的段落？

问题描述：

我有一个按钮，可以在一个div中动态创建段落以及一个ID。当您创建一个段落时，您还可以通过单击该段落（“当您单击段落”时）选择该段落（“背景颜色更改”），通过其中的链接创建一个div。试图单独删除，但它会一次删除所有段落如何单独删除动态创建的段落？

如何删除正在被选中的段落（“我的意思是个别”）？

这里是链接，我到目前为止有：

http://jsfiddle.net/RzvV5/88/

的Javascript/jQuery代码：

$(document).ready(function(){ 
    var id = 1; 
    $("#push").on({ 
     click: function(){ 
      var pr = $('<p class="test">This is text ' + id + '</p>'); 
      var d = $("#Test"); 
      var pclone = $(pr).clone(); 
      pclone.on({ 
       mouseenter: function(){  
        $(this).addClass("inside"); 
       }, 
       mouseleave: function(){        
        $(this).removeClass("inside"); 
       }, 
      }); 
      pclone.appendTo(d); 
      id++; 
     } 
    }); 

    var div = $('<div class="customD" id="d"></div>'); 
    var del = $('<a href="#" class="delete" id="erase">Delete</a>'); 
    var pcust = $(div).clone(); 
    var pdel = $(del).clone(); 

    $("#Test").on("click", "p", function(){ 
     var cur = $(this).css("background-color"); 

     if(cur=="rgb(255, 255, 255)") { 
      $(this).css("background-color","red").addClass("help insider"); 
      $(this).after(pcust); 
     } 
     else { 
      $(this).css("background-color","white").removeClass('help insider'); 
      $(pcust).remove(); 
     }  

     $(pcust).append(pdel); 

    }); 
});

HTML代码：

<html> 
<body> 
    <a href="#" id="push">Push</a> 
    <div id="Test"></div> 
</body> 
</html>

CSS代码：

.test { color: #000; padding: .5em; margin: 0px; border: 2px solid white; background: white;} 

.help { border: 2px dashed #FDD } 

.inside { border: 2px solid red } 

.insider { border: 2px solid #FDD; } 

.delete { font-size: 12px; } 
.customD { background: yellow}

答

您可以添加单击事件处理程序来删除链接

$(".delete").live("click",function(){ 
     $(this).parent().prev().remove(); 
     $(this).remove(); 
    });

BTW。你不必克隆每一次链接和它的父div，你可以建立圆顶的那部分并保持相同的参考，如果你重复使用

var div = $('<div class="customD" id="d"></div>'); 
var del = $('<a href="#" class="delete" id="erase">Delete</a>'); 
div.append(del); 

    $("#Test").on("click", "p", function(){ 

     .... 
     $(pcust).append(del); //this will not clone delete div, it will actually replace its position it dome structure and move it from one paragraph to "pcust". This will save memory!!! 

     .... 
    };

如何单独删除动态创建的段落？

相关推荐