Removal of link using JQuery

Question

I am trying to do a very simple task but I cannot seem to figure it out. I am trying to write a function that will remove a link without removing the text associated with it. Here are the specifics:

<a href="../../../../articles/c/a/t/Special%7ECategories_101d.html" title="Special:Categories">Categories</a>[/CODE]

I am trying to remove everything EXCEPT the text "Categories", I just want to remove the href tag. I would even be willing to rename the title "Categories". I just want to link gone. This link is in a div called "mw-normal-catlinks" and it is the first link in the div. I do not want to remove the other content in that div.

I am very new to jQuery and so far I have an idea of what to do. This is what I got:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#mw-normal-catlinks a.first').replaceWith('Categories');
</script>

Now I am not sure if I am missing anything because when i put this in my HTML code, nothing happens. I'm not sure if I need to add a div to make it work.

I want to eventually implement this into a PHP coded tool I use to convert wiki pages to html so maybe I will need to add some sort of div?

Thanks everyone!

Answer 1

Use .unwrap()

$('#mw-normal-catlinks a.first').contents().unwrap();

Also you probably want this selector instead since your a tag doesn't have a class of .first:

$('#mw-normal-catlinks a:first-child').contents().unwrap();

Answer 2

.first means "A member of the class first", you might be confusing it with :first-child or :first-of-type