jQuery的刪除功能跟進

我上週提出這樣一個問題：jQuery的刪除功能跟進

chrome not working with jquery remove

，並能夠解決它（愚蠢對我而言真的），但我的例子很簡單。目前我正在嘗試使用.remove在將一組輸入發送到ajax函數之前消除頁面中的完整div。但是，我無法獲得.remove的工作。

這裏是我的最新嘗試： http://jsfiddle.net/CJ2r9/2/

我得到在多個瀏覽器中的jsfiddle沒有定義的功能。在我的應用程序，我絕對沒有錯誤，但沒有任何作品。

我是比較新的JavaScript範圍，因此如果問題是範圍明智的，那麼請讓我知道我是如何搞砸了。

我已經使用.on jQuery函數也嘗試過，但它是一個有點更加混亂考慮我的div編號是從服務器動態（JSTL，Spring MVC的，等等）裝入。如果這是一個解決方案，請讓我知道我如何才能走上正確的軌道。

謝謝！

來源

2013-08-06 Nimchip

更改的jsfiddle從「onDomready」改爲「無包裝」設置。另一個問題是你想刪除的元素不存在。 div元素的ID爲「removeXXX ** p **」，並在您的事件處理程序中通過「removeXXX ** s **」。 '.on'會不那麼痛苦。你不需要ID來移除一個元素，任何對它的引用都可以。使用'.on'綁定事件處理程序並使用DOM遍歷來查找要刪除的正確元素。 –

你想刪除的元素都不在你的標記 – cfs

是的，謝謝你指出。一些phoneSets和scheduleSets缺少id。我回去修理它，但沒有拆除。我用@FelixKling回答。 – Nimchip

在你的jsfiddle的兩個問題是：

範圍：removeElem是不是在全球範圍內，因爲你走的默認配置選項在DOM準備好執行代碼。您可以將其更改爲「無包裝」以使功能成爲全球。
要刪除不存在的元素。 div元素的ID爲「removeXXXp」，並在您的事件處理程序中傳遞「removeXXXs」。

這裏是元素移除的其他更簡單的解決方案（在我看來）。鑑於您的標記：

<div class="scheduleSet" id="remove315p"> 
    <!-- ... --> 
    <a href="javascript:void(0);" class="optionHide">Remove</a> 
</div>

您可以使用.on像這樣：

$('.schduleSet a.optionHide').on('click', function() { 
    // traverses up the DOM tree and finds the enclosing .schduleSet element 
    $(this).closest('.scheduleSet').remove(); 
});

你甚至都不在所有需要的ID。

來源

2013-08-06 16:10:30

這個工作很好，謝謝。 – Nimchip

我看到你已經在使用jQuery。你爲什麼不這樣來做：

<div id="foo">This needs to be removed</div> 
<a href="#" id="remove" data-remove="foo">Remove</a> 

function removeElem(element){ 
    $('#'+element).remove(); 
} 

$(function(){ 
    $("#remove").click(function(){ 
     removeElem($(this).data('remove')); 
    }); 
})

小提琴這裏：http://jsfiddle.net/vLgpk/

他們的方式這個作品是，使用data-remove（可以像數據-XYZ BTW任何東西），結合與DIV刪除鏈接。然後您可以稍後在單擊刪除時閱讀此綁定。

如果您是jQuery的新手，並且想知道data-remove是什麼，那麼您可以添加到代碼中的只是自定義屬性，以後可以使用元素上的data()調用來獲取代碼。 Bootstrap等許多優秀的框架都使用這種方法。

在我看來，使用這種方法的優點是你可以有刪除鏈接的任何地方你的UI，他們並不需要通過在其內部結構選址關係到你的div。

來源

2013-08-06 16:07:34 Shaunak

我做了一個簡單的小提琴，內聯onclick沒有看到JavaScript中定義的函數，所以我得到一個ReferenceError: myRemove is not defined。

通過在js中添加監聽器，.remove()工作正常。

對不起，我不知道是什麼原因引起行爲上的差異。

測試出來：http://jsfiddle.net/xTv5M/1/

// HTML5 
<div id="removeme">foo bar</div> 
<button onclick="myRemove('removeme')">Go</button><br> 
<div id="removeMe2">foo bar</div> 
<button id="go2">Go Again</button> 

// js 
function myRemove(name){ 
    $('#'+name).remove() 
}; 

$('#go2').click(function(){ myRemove('removeMe2') });

來源

2013-08-06 16:12:38 Plato

jQuery的刪除功能跟進

回答

相關問題