-1

IDとともにdivに段落を動的に作成するボタンがあります。段落を作成するときに、その段落をクリックして選択することもできます（「背景色の変更」）。それに加えて（「段落をクリックすると」）、その中にリンクが含まれる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}
4

1 に答える 1

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

        ....
    };
于 2012-04-25T00:32:12.207 に答える