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');
}

The Add button appends elements to the popUpMessageBoard span element. On clicking the delete button I want all elements with the .notification class to be removed from the parent span element. What am I missing ?

Answer 1

The .remove() method will remove elements that are in the matched set. When you pass a selector to it, it simply filters the matched set. In your case, this filtering will leave you with an empty set of elements and nothing will get removed.

You need to remove descendants of elements in the matched set. You can use .find() (or one of the numerous other methods available) to get those descendants:

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