从span元素中删除具有特定类的所有元素

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。单击删除按钮时，我希望从父span元素中删除所有带有.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();