Question

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

如何删除正在选择的段落（“我的意思是单独”）？

这是链接和我到目前为止所拥有的：

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}

Answer 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!!!

        ....
    };

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

1 个答案: