How to remove specific anchor tag and following delimeter from a div

I'm trying to create an outlook style To: / recipients list when I select contacts from a javascript address book I wrote.

I have a list of contacts in an addressbook which when selected, looks like this...

<div class="contact selected">
    <div style="clear: both;"></div>
    <div class="innertxt" id="c_e4f6ea43-03fd-4496-aa58-917a17e31206">
        <span id="Test User">
        <img width="48" height="48" src="/Content/Cache/4.gif"><a href="/Management/Employee/Edit/e4f6ea43-03fd-4496-aa58-917a17e31206" class="contact-link">Test User</a>
        <ul>
            <li>test.user@test.com</li>
            <li>123456789</li>
        </ul>
    </span></div>
</div>

and a recipient div which looks like this...

<div id="RecipientNames"></div>

I have some javascript that runs to select the anchor tag within this user and add that achor to my recipient field along with a delimiter ;

function ContactSelected(contact) {
    var contactLink = $(contact).find('div[id^="c_"] a');
    contactLink.clone().appendTo("#RecipientNames");
    $("#RecipientNames").append("; ");
}

The contact passed into this function is the entire contact element presented at the start of this question.

Thus I end up with....

<div id="RecipientNames">
  <a class="contact-link" href="/Management/Employee/Edit/e4f6ea43-03fd-4496-aa58-917a17e31206">Test User</a>; 
</div>

Problem

Given a RecipientName开发者_StackOverflow中文版s div that has multiple recipients, what jquery can I use to remove the contact-link anchor tag and the following '; '.

<div id="RecipientNames">
  <a class="contact-link" href="/Management/Employee/Edit/e4f6ea43-03fd-4496-aa58-917a17e31206">Test User2</a>;
  <a class="contact-link" href="/Management/Employee/Edit/e4f6ea43-03fd-4496-aa58-917a17e31206">Test User2</a>;
  <a class="contact-link" href="/Management/Employee/Edit/e4f6ea43-03fd-4496-aa58-917a17e31206">Test User3</a>;
</div>

So, for example if I wanted to remove TesetUser2; which is the entire <a> tag plus the semi-colon after. In this particular case, it is the middle user and semi-colon being removed. But they can be removed in any order so it always needs to be the semi-colon following the contact specified.

How would I go about implementing the Remove function that will be called. I have tried the following but it was a guess and consequently does not work :)

public ContactRemoved(contact) {
     var selector = $(contact).find('div[id^="c_"] a').attr("href");
     var recipients = $("#RecipientNames");
     $(recipients).remove('a[href^="' + selector + '"]').remove("; ");
}

FINAL SOLUTION

    function ContactSelected(contact)
    {
        // append selected contact name to recipient list.
        var contactLinkSpan = $("<span>");
        var contactLinkClone = $(contact).find('div[id^="c_"] a').clone();
        contactLinkClone.appendTo(contactLinkSpan);
        contactLinkSpan.append("; ");
        contactLinkSpan.appendTo("#RecipientNames");
    }

    function ContactRemoved(contact) {
        // remove selected contact from recipient list.
        var selector = $(contact).find('div[id^="c_"] a').attr("href");
        $("#RecipientNames").find('a[href^="' + selector + '"]').parent().remove();
    }

---

I would wrap each semicolon in a span tag (<span id="{associated_anchor_tag}">;</span>) and add an associative anchor tag identifier as an id attribute. When you are ready to delete a particular contact, find the appropriate span tag and perform a simple $.remove() on it

Sample code below, should help in understanding the answer above

Creating the span tag

var contactLink = $(contact).find('div[id^="c_"] a');
var contactLinkIdentifier = $(contact).find('div[id^="c_"]').attr("id");
contactLink.clone().appendTo("#RecipientNames");
$("#RecipientNames").append('<span id="'+contactLinkIdentifier+'">;</span>');

Removing the correct node

 function contact_removed(contact) {
     var selector = $(contact).find('div[id^="c_"] a').attr("href");   
     var contactLinkIdentifier = $(contact).find('div[id^="c_"]').attr("id");
     var recipients = $("#RecipientNames");
     $(recipients).remove('a[href^="' + selector + '"]');
     $(recipients).remove(contactLinkIdentifier);
 }

You can remove some lines of code if you simply add an id attribute to the anchor tag and simply call remove once

EDIT: If you want the semicolon to be inside a <span> with the <a> tag, then simply create a new span tag and append to it the <a> tag clone. Some sample code below should help

var contactLinkSpan = $("<span>");
var contactLinkClone = $(contact).find('div[id^="c_"] a').clone();
contactLinkClone.appendTo(contactLinkSpan);
contactLinkSpan.append("; ");
contactLinkSpan.appendTo("#RecipeintNames");

And, when you are ready to delete, simply find the respective <a> tag, get its parent (which would be the <span> tag) and you can remove that from the DOM by calling $.remove()

---

I have tried putting the anchor inside the span as in my comment to @Salman. This is what I tried

$("#RecipientNames").append('<span id="' + contactLinkIdentifier + '">'+contactLink.clone()+';</span>');.

This however, results in [object Object] being placed inside the span. <span id="c_e4f6ea43-03fd-4496-aa58-917a17e31206">[object Object];</span>, rather than rendering the actual element inside the span.

I have also tried using contactLink.clone().html() but that just renders the html value of the element and not the entire element html.