移除自我<a> tag</a>

Question

我有一个小问题，在我的菜单中有一些没有hrefs的链接（比如我的空链接）。 如果它没有href，我想删除但保留文本。

这就是我得到的：

$('.mainmenu a, .mainmenu a *').each(function(){
    var href = $(this).attr('href');
    if(!href)
    {
        console.log($(this).html());
        //Remove <a> from this element, how?
    }
});

请帮忙吗？

Answer 1

您需要打开内容然后

$('.mainmenu a:not([href])').contents().unwrap()

:not过滤掉没有href标记的元素

.contents()返回一个包含内容的jQuery对象 - 即文本

.unwrap()删除了它周围的锚标记

Answer 2

纯JavaScript

如果你想要一些基于性能的代码，可以尝试一下。

var emptyAnchors = document.querySelectorAll('.mainmenu a:not([href])');
var content = "";

for (var a in emptyAnchors) {
    if(emptyAnchors[a].nodeType == 1)
    {
        content = document.createTextNode(emptyAnchors[a].innerHTML);
        emptyAnchors[a].parentNode.insertBefore(content, emptyAnchors[a]);
        emptyAnchors[a].parentNode.removeChild(emptyAnchors[a]);
    }
}

Performance review

Live Demo

---

JQuery的

使用JQuery $.unwrap()方法。这将获取所选DOMElement的textnode并从元素中提取它，然后删除空元素。

$('.mainmenu a:not([href])').each(function(){
    $(this).contents().unwrap(); /* Will delete the tag but keep its content */
});

Live Demo

注意：此选项几乎可以替代所选答案，效率更高。

Answer 3

1. 使用:not CSS3选择器。
2. 使用.replaceWith方法。

---

$('.mainmenu a:not([href])').each(function(){
    $(this).replaceWith($(this).text());
});

Answer 4

另一个解决方案将父素的内容替换为要删除的元素的内容$(this).replaceWith($(this).contents())

JSFiddle

Answer 5

尝试：

$('.mainmenu a:not([href])').each(function() {
    var $this = $(this);
    $this.replaceWith($this.text());
});

可能会更快一点：

$('.mainmenu a').each(function() {
    var $this = $(this);
    $this.attr('href') || $this.replaceWith($this.text());
});