關閉動態創建Div按鈕點擊

我經歷了很多帖子從SO，但無法與我的情況。關閉動態創建Div按鈕點擊

我有這個代碼按鈕點擊。用戶可以通過它在UI上創建儘可能多的div。

$('#adddiv').click(function() { 
    debugger; 
    $('#main').append('<div class="ara-dynamic-div"><div class="box box-solid bg-light-blue-gradient"><div class="box-header"><!-- tools box --><div class="box-tools"><div class="btn-group"><button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-server"></i></button>         <ul class="dropdown-menu pull-right" role="menu">          <li><a href="#">Add new event</a></li>          <li><a href="#">Clear events</a></li>          <li class="divider"></li>          <li><a href="#">View calendar</a></li>         </ul>        </div>        <button class="btn btn-primary btn-sm" data-toggle="tooltip" title="Overlay"><i class="fa fa-chain"></i></button>        <button class="btn btn-primary btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>        <button id="remove" class="btn btn-primary btn-sm pull-right" data-widget="remove"><i class="fa fa-times"></i></button></div><i class="fa fa-map-marker"></i><h3 class="box-title"></h3></div><div class="box-body"></div><!-- /.box-body--></div></div>'); 
});

代碼獲取ButtonClick事件從該div

$(document).on('click', '#remove', function() { 
    showMakeAndHold(this); 
}); 


function showMakeAndHold(obj) { 
    alert(obj); 
    $('.ara-dynamic-div').fadeOut(); 
}

現在的問題是，我要創建多個動態格。每個div都會有按鈕關閉自己。當我調用這個函數時，它會關閉所有創建的div，而不是單擊哪個按鈕。

我無法找到接近請求的正確div。我是DOM和JQuery的新手。不能夠涉及的事情

來源

2015-08-03 Ameya Deshpande

無需再進一步查看，ID是唯一的 - 每次創建新的DIV時，您的代碼都會添加相同的div和按鈕ID - 因此，如果您的div ID爲目標，則刪除一個將刪除所有ID - 同樣的按鈕ID會觸發當$（document）.on（'click'，'#remove'，function（）{'引發 –

@DarrenSweeney嘿，但如何克服這一點。當用戶動態創建10個div。那麼我將如何區分每個他們然後能夠關閉它 –

在jquery中查看'nearest（）'或'parent（）'（如果總是相同的結構） - 你給按鈕和外部div一個CLASS，而不是ID，那麼當那個按鈕類被點擊你尋找與新的div類最接近的div並將其刪除 –

首先，如果你使用多個div你不應該放棄的關閉按鈕的ID，而是一個類，而不是（比方說，.close）

接下來，您可以使用事件代表團找出正確的元素：

$(document).on('click', '.ara-dynamic-div .close', function(event) { 
    $(this).closest('.ara-dynamic-div').fadeOut(); 
})

被代理方在處理任何.ara-dynamic-div .close按鈕，所有點擊事件，抓住所有這些，讓您使用$(this).closest(...)噸到達父容器。

編輯：修正了一個錯誤

來源

2015-08-03 11:11:33 Katai

這會褪色只有按鈕了 - 使用這樣的'$（本）.closest（「ARA-動態專區」），隱藏（）;' –

@DarrenSweeney是的，我剛剛意識到張貼片刻後，唐不知道我在想什麼;）編輯它。 – Katai

@凱泰感謝它的工作 –

您可以使用jQuery的.closest()功能。本

$(document).on('click', '#remove', function() { 
    showMakeAndHold(this); 
});

：

function showMakeAndHold(obj) { 
    alert(obj); 
    $(obj).closest('.ara-dynamic-div').fadeOut(); 
}

JSFiddle

來源

2015-08-03 11:11:43 JBux

從不使用警報進行調試 –

替換此

$(document).on('click', '#remove', function() { 
    $(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function() { 
     $(this).remove(); 
    }); 
});

Here is the JSFiddle demo

什麼代碼所做的是它重新移除所有其他.ara-dynamic-div，但按鈕被點擊的那個除外。

來源

2015-08-03 11:25:52

關閉動態創建Div按鈕點擊

回答

相關問題