動的に作成された段落を個別に削除する方法は？

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

出典

2012-04-25 jQueryster

あなたは

$(".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-25 00:32:12

動的に作成された段落を個別に削除する方法は？

答えて

関連する問題