私は次のコードを持ってクリック

とAPPEND削除： HTML：私は次のコードを持ってクリック

<body> 
     <div> 
     <p class='Go'> 
      Create 
     </p> 
     <p class='Del'> 
     Remove 
     </p> 
     </div> 
    </body>

CSS：

.Go{ 
    background-color: lime; 
    width:45px; 
    text-align: center; 
} 
.bad{ 
    background-color:Red; 
    width: 45px; 
    text-align:center; 
} 
.Del{ 
    background-color:pink; 
    width: 55px; 
}

のJavascript（jQueryの）

$(document).ready(function(){ 
    $('.Go').click(function(){ 
     $('div').append("<p class='bad'>Delete</p>"); 
    }); 
    $('.bad').click(function(){ 
     $(this).remove(); 
    }); 
    $('.Del').click(function(){ 
     $('.bad').remove(); 
    }) 
});

アイデアは毎回ということでしたが私は "作成"をクリックし、それは新しい "削除"を追加します。

「削除」をクリックするたびに、すべての「削除」が削除され、「削除」をクリックするたびにその削除が削除されます。

最後のものを除くすべてが機能します。私はここで何をしているのですか？

出典

2017-08-22 Lucian cahil

'DELETE'要素がページの後に追加されているので、それはだがロードされますが、' .click'は、ページがロードされたときに何の 'bad'のdivが存在しないので、何にも束縛されます。 – tima

divで削除したい部分を設定するとどうなりますか？そのため、div内のすべてを削除するをクリックすると削除されます。 –

この場合、jQueryのクリックをまだ存在しない要素にバインドすることはできません。クリックは$（document）.ready（）にのみバインドします。これを回避する方法は、ドキュメント準備機能の実行中に存在する要素に、必要な削除をバインドすることです。

$('body').on('click', '.bad', function(){ 
    $(this).remove() 
})

体がクリックされるたびに、そのイベントのターゲットは.badののクラスを持って、それを削除する場合、これは、言います。このようにして、jQueryイベントは正しくバインドされます。ここでの例作業

：https://jsfiddle.net/xexhdfzw/1/

出典

2017-08-22 02:17:18 Beaut

私は次のコードを持ってクリック

答えて

関連する問題