从 Divi（WP 主题）中删除移动菜单中自动生成的 <a>s答案

【问题标题】：Removing auto-generated <a>s in the mobile menu from Divi (WP Theme)从 Divi（WP 主题）中删除移动菜单中自动生成的 <a>s
【发布时间】：2021-04-27 08:55:39
【问题描述】：

我在尝试为客户的网站删除移动菜单中的一些自动生成的锚标记时遇到问题。暂时我用 CSS 将它们“掩盖”和“隐藏”，但这是一个迟钝的解决方案，我想要一些最终更精致的东西。我在 Wordpress 中使用 Divi 主题。

问题图片如下：

这是一个问题，因为我希望只有一行用于社交链接，另一行用于“立即调用”按钮，以使其看起来更流畅（容器 div 具有 CSS 属性 x-overflow:auto; 和子元素（container_div li a) 具有 CSS 属性 display:inline; 然后最后将 call now 按钮设置为 display:block; 将其放在下一行)。很明显，这些神秘的锚元素正在迫使一切失去对齐。这些菜单项只是从 WP 管理 UI 中外观 > 菜单中的自定义链接构建的。

很明显，我的代码中没有空的锚标记（我将在底部发布）。

我的尝试

Javascript

这种类型的脚本：

<script type="text/JavaScript">
//script here
var menuButton = document.getElementById("strategos-menu-button");
//call function here, see below

function removeEmptyAnchorsFromDiviMobile(){
    var strategosFirst = document.getElementById("menu-item-528"); //CSS ID generated by Divi for the 
    menu's 'li a'

    var strategosSecond = document.getElementById("row-cta-strategos"); //CSS ID of my own making

    strategosFirst.removeChild(strategosFirst.childNodes[0]);
    strategosFirst.removeChild(strategosSecond.childNodes[0]);
}
</script>

函数有两种调用方式：

var menuButton = document.getElementById("strategos-menu-button");
menuButton.addEventListener("click", removeEmptyAnchorsFromDiviMobile);
//where 'menuButton' is the "hamburger icon" from the mobile menu module pre-built into the Divi 
theme with a CSS ID assigned to it within the page builder's interface

和

window.onload = removeEmptyAnchorsFromDiviMobile;
//where this object.onload has been placed either directly on the page in a couple different places 
or in the <head>

这两种方法都没有奏效。

接下来（实际上是第一个），我尝试了一些 CSS。

CSS

#menu-item-528::after{
    content:none !important;
    /*also tried*/
    display:none !important;
}

对以下 #row-cta-strategos 做了同样的事情，但两种方法都不起作用。

PHP

TBH 我还没有在我的子主题的文件结构中尝试过任何东西，因为我对 WP 文件结构并不是很熟悉，而且手头的紧迫问题比花几个小时解决这个小问题...所以如果解决方案在于修改文件结构中的一些功能，在我花几个小时在空闲时间挖掘文件之前，我将不胜感激:)

正如所承诺的，这里是菜单的 HTML。谢谢！

<div class="row-cta-strategos">
    <a href="https://www.facebook.com/mycustomer" target="_blank" id= "strategos- facebook" class="header-social-call" rel="opener"><i class="fab fa-facebook-f"></i></a>

    <a href="https://www.linkedin.com/company/mycustomer/about/" target="_blank" id="strategos-linkedin" class="header-social-call" rel="opener"><i class="fab fa-linkedin-in"></i></a>

    <a href="https://www.youtube.com/channel/companystring" target="_blank" id ="strategos-youtube" class="header-social-call" rel="opener"><i class="fab fa-youtube"></i></a>

    <a href="tel:+15555551234" class="header-social-call" id="call-strategos"><i class="fas fa-phone-square-alt"></i>
    <span id="header-call-txt-strategos">Call Now: (555) 555-1234</span>
</a>
</div>

【问题讨论】：

菜单可能有问题。我可以得到你的网址吗？
staging2.acsntx.com
你能删除 div 并检查是否有什么变化吗？
我只用运行它，没有容器
。它删除了一个，但另一个仍然存在。我认为这已经足够好了。感谢您的帮助！

标签： javascript php css wordpress divi

【解决方案1】：

我不确定什么时候调用下面的函数...它可以是onload 和setTimeout()...在setInterval() 上也许？。

function removeEmptyAnchorsFromDiviMobile(){

  // Get ALL anchors in page
  let allAnchors = document.QuerySelectorAll("a")

  // Loop them
  allAnchors.forEach(function(anchor){

    // If the anchor has no child
    if(!anchor.hasChildNodes()){
      anchor.remove()
    }
  })

}

【讨论】：

感谢 Louys 的精彩推荐，但该脚本也不起作用：/