クリックして<div>を追加し、クリックして削除する

私は次の問題があります:

私はdivを追加します:

$(".class").click(function() {   
    $(this).append("<div class='click'></div>");
    $("div.click").show();
});

それから別のボタンをクリックして削除しますが、divはまだそこにあります。

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});
1
私の推測 - それらの何か "..."はエラーを引き起こしています - またはボタンのクリック機能が呼び出されていません。
追加された 著者 ek_ny,
preventDefault()の後に hide を置く特別な理由はありますか?なぜ前に?それは明らかにそうです。
追加された 著者 hitesh israni,
あなたの問題を理解していない。あなたが求めていることは、上記のフィドルに示されているように、働いています。
追加された 著者 hitesh israni,
それを実際に削除しようとしていますか?またはそれを隠すだけですか?現在のところ、あなたは後者しかやっていないからです。
追加された 著者 David,
あなたのhtmlを表示...
追加された 著者 Mohammad Adil,
jsfiddle.net/suhailvs/4VmYP はいdivがそこにあります
追加された 著者 suhailvs,
ボタンのクリックハンドラが実際に呼び出されていますか?
追加された 著者 user1864610,

7 答え

から "on"を削除する

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});
2
追加された
それは何を達成するでしょうか?
追加された 著者 David,
いいえ - 私が見る限りでは関連はありません。
追加された 著者 user1864610,

次のように動作するはずのdivへのポインタを保持してみてください。

var tempDiv;
$(".class").click(function() {   
  tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  tempDiv.remove();
});

それ以外の場合は、この方法で使用できます

$(".class").click(function() {   
   $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  $('.click').remove();
});

PS: .click クラスがデフォルトで非表示になっていない場合は、 .show()を削除することもできます

1
追加された
Try this

You have two buttons.

Say:

<div class="Main">
    <div>Div0</div>
</div>

<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>


and JS Code is :

var counter=1;

$(".button1").click(function() {  

$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});

$(".button2").click(function() {

$('.Main div').remove(':last-child');
});
1
追加された

動的に要素を作成する場合は、delegated-event: .on(event、selector、handler(eventObject))が必要です。

$(document).on("click", ".button", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});

要素を削除する場合は、 .hide()の代わりに .remove()メソッドを使用してください。

0
追加された

Here is an example based on your work : http://jsfiddle.net/UQTY2/128/

<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>

$(".class").click(function() {
    $(this).append("<div class='click'></div>");
});

$(".button").click(function(e) {
    e.preventDefault();
    $("div.click").remove();
});
0
追加された

これで削除されます

$(".button").on("click", function (e) {

    e.preventDefault();
    $("div.click").remove();
});

私のフィドルをチェック

http://jsfiddle.net/suhailvs/4VmYP/2/

0
追加された

あなたは動的にこのようなjavaScriptでdivを追加したり削除したりすることができます

この例を確認する

部署の動的追加と削除

この例では、デフォルトの削除ボタンを使用すると、最後に追加されたdivを削除したり、コンテナ内の最後のdivを指定することができます しかし、divの場所番号で特定のdivを削除する場合は、div番号を入力することができます。

コード例

HTML

<div class="Main">
    <div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>

<input id="V"/>
<button id="Vok">ok</button>

JS

var counter=0;
$("#ok").click(function(){
    $('.Main').append('<div> new div'+counter+'</div>');
    counter++;
})
$("#del").click(function(){
    $('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
    var Val=$('#V').val();
    $('.Main div:nth-child('+Val+')').remove();
})
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript