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

【问题标题】：How to individually delete a dynamically created paragraph?如何单独删除动态创建的段落？
【发布时间】：2012-05-05 16:10:24
【问题描述】：

我有一个按钮，可以在 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}

【问题讨论】：

标签： jquery dynamic paragraph

【解决方案1】：

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

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

顺便说一句。您不必每次都克隆链接及其父 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!!!

        ....
    };

【讨论】：