Как удалить определенный тег привязки и следующий разделитель из div

Question

Я пытаюсь создать внешний вид To:/список получателей при выборе контактов из адресной книги javascript, которую я написал.

У меня есть список контактов в качестве адресной который при выбранном, выглядит следующим образом ...

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

и DIV-получателя, который выглядит следующим образом ...

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

У меня есть некоторый javascript, который запускает выбор тега привязки внутри этого пользователя и добавляет его в мое поле получателя вместе с разделителем ;

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

Контакт, переданный в эту функцию, представляет собой весь контактный элемент, представленный в начале этого вопроса.

Таким образом, я в конечном итоге с ....

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

Проблема

Пусть даны RecipientNames DIV, который имеет несколько получателей, то, что JQuery можно использовать, чтобы удалить контакт-ссылка якорный тег и следующие '; ».

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

Так, например, если я хочу, чтобы удалить TesetUser2;, который весь <a> тег плюс запятой после. В этом конкретном случае удаляется средний пользователь и точка с запятой. Но они могут быть удалены в любом порядке, поэтому всегда должна быть точка с запятой после указанного контакта.

Как я могу реализовать функцию Remove, которая будет вызвана. Я попытался следующие, но это предположение и, следовательно, не работает :)

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

окончательного решения

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

Я бы обернуть каждый точкой с запятой в тег диапазона (<span id="{associated_anchor_tag}">;</span>) и добавить ассоциативный идентификатор метки привязки в качестве атрибута id. Когда вы будете готовы удалить конкретный контакт, найдите соответствующий тег span и выполните простой $.удалить() на нем

Пример кода ниже, должны помочь в понимании ответа выше

Создания калибровочного тега

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

Удаления правильного узла

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

Вы можете удалить некоторые строки кода, если вы просто добавляете атрибут id в тег привязки и просто вызываете удаление один раз

EDIT: Если вы хотите, чтобы точка с запятой была внутри <span> с тегом <a>, просто создайте новый тег span и добавьте к нему клоун тега <a>. Некоторые примеры кода ниже, должны помочь

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

И, когда вы будете готовы удалить, просто найти соответствующий <a> тег, получить его родителя (которая была бы <span> тег), и вы можете удалить, что из DOM по телефону $ .remove()

Answer 2

Я попытался поставить якорь внутри пролета, как в моем комментарии к @Salman. Это то, что я пробовал

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

Это, однако, приводит к [объекту объекта], размещенному внутри пролета. <span id="c_e4f6ea43-03fd-4496-aa58-917a17e31206">[object Object];</span>, вместо того, чтобы отображать фактический элемент внутри пролета.

Я также пробовал использовать contactLink.clone().html(), но это просто отображает значение html элемента, а не весь элемент html.