Question

当我从我写的javascript地址簿中选择联系人时，我正在尝试创建Outlook样式To: /收件人列表。

我在地址簿中有一个联系人列表，在选中时，看起来像这样......

<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运行以选择此用户中的锚标记，并将该achor添加到我的收件人字段以及分隔符;

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来删除contact-link锚标记和以下'; ”。

<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属性。当您准备删除特定联系人时，找到适当的span标记并在其上执行简单的$ .remove（）

下面的示例代码应该有助于理解上面的答案

创建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属性添加到锚标记中，只需调用remove一次

，就可以删除一些代码行。

编辑：如果您希望分号位于带有标记的<a>内，则只需创建一个新的span标记并将<a>标记克隆附加到其上。下面的一些示例代码应该有帮助

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

并且，当您准备删除时，只需找到相应的<a>标记，获取其父标记（可以是标记），然后您可以通过调用$从DOM中删除它。除去（）

Answer 2

我已经尝试将锚点放在跨度中，就像我对@Salman的评论一样。这就是我试过的

$("#RecipientNames").append(''+contactLink.clone()+';');。

然而，这导致[object Object]被放置在span中。 [object Object];，而不是在范围内渲染实际元素。

我也试过使用contactLink.clone().html()，但只是渲染元素的html值而不是整个元素html。

如何从div中删除特定的锚标记和以下分隔符

2 个答案: