Question

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>[e-mail]</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 RecipientNames 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();
    }

Answer 1

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()