JQuery - Removing all anchor tags with a specific class from a div

Question

In some cases, and for reasons beyond the scope of this question, the bindings are repeated. Here's a sample div:

<div class="unifyRepeat listing"> <a class="businessAnchor" name="abcchildcareandlearningcenter"></a> <a class="businessAnchor" name="abcchildcareandlearningcenter"></a> <a class="businessAnchor" name="abcchildcareandlearningcenter"></a> <a class="businessAnchor mceItemAnchor" name="abcchildcareandlearningcenter"></a> <table class="tblListing"> <tbody> <tr> <td> <p class="bold">ABC Child Care and Learning Center</p> <p>Jane Smith</p> <p>[phone]</p> </td> <td> <img alt="" src="images/ABCchildcare.jpg"> </td> <td> </td> </tr> </tbody> </table> <a class="linkToTop" href="#top">^ Top</a> </div> 

Here's a jQuery that adds an anchor and tries to remove any existing ones:

 $('#businessListings div.listing').each(function() { var name = $(this).find('p:first').text(), cleanedName = name.replace(/\W/g, '').toLowerCase(); $('ul#businessListingLinks').append('<li><a href="#' + cleanedName + '">' + name + '</a>'); var anchor = '<a class="businessAnchor" name="' + cleanedName + '"></a>'; $(this).remove('a.businessAnchor'); //$(this).each('a.businessAnchor').remove(); $(this).prepend(anchor); }); 

I thought that the remove () line would select all the anchor tags with the "businessAnchor" class, but that is not the case.

As you can see, I tried the each () function, but that didn't work. I am not sure if this is because I did not implement it correctly or for some other reason.

Answer 1

Try the following:

 $(this).find('a.businessAnchor').remove(); 

Since the markup seems like a.businessAnchor is a direct child of the div, you can also do this:

 $(this).children('a.businessAnchor').remove();