从跨度元件删除与特定类的所有元素

Question

HTML：

<script src="../../Scripts/notificator.js" type="text/javascript"></script> 

<span id="popUpMessageBoard"/> 
<button onclick="success('message', 'popUpMessageBoard')">Add</button> 
<button onclick="remove('popUpMessageBoard')">Remove</button> 

的javascript：

success = function (messageToApply, elementIdToApplyMessages) { 
    $('#' + elementIdToApplyMessages).append('<strong class="notification" style="color:blue">' + messageToApply + ' </strong>'); 
}; 

remove = function (elementId) { 
    $('#' + elementId).remove('.notification'); 
} 

Add button的附加元素到popUpMessageBoard span element。单击删除按钮时，我希望.notification class的所有元素都可以从父跨度元素中移除。我错过了什么？

Answer 1

的.remove()方法，卸下在匹配设置元素。当您将选择器传递给它时，它会简单地过滤匹配的集合。在你的情况下，这个过滤会留下一个空的元素集，而且没有任何东西会被删除。

您需要删除匹配集中元素的后代。您可以使用.find()（或利用许多其他方法之一），以获得这些后代：

$('#' + elementId).find('.notification').remove(); 

Answer 2

你必须改变你的CSS选择器这样

remove = function (elementId) { 
    $('#' + elementId).children('.notification').remove(); 
} 

Answer 3

$('#' + elementId + ' > .notification').remove();