文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jquery删除“阅读更多”？

问如何使用jquery删除“阅读更多”？
EN

Stack Overflow用户

提问于 2019-07-17 02:00:57

回答 5查看 86关注 0票数 0

如何显示:无“阅读更多”从父div类名称“发布内容”有一个问题，我无法删除通过<a>标签类的“阅读更多”在Jquery的帮助下，我如何解决这个问题？Output of this code

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div class="post-content">
      Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>

  </body>

  </html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <script>
    $('.post-content').text(function(_, txt) {
      return $.trim(txt.split('-').pop());
    });
    $(".more-link").css("display", "none");
  </script>
</body>

</html>

javascript

jquery

html

css

回答 5

Stack Overflow用户

发布于 2019-07-17 02:09:50

下面这样的代码应该删除给定类名的所有元素：

let links = document.querySelectorAll(".more-link");
for (let link of links) {
  link.remove();
}

<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>
<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>
<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>

票数 1

Stack Overflow用户

发布于 2019-07-17 02:10:00

您可以简单地使用document.querySelectorAll来获取所有的a元素，这些元素都是post-content类div的后代。

接下来，将querySelectorAll返回的NodeList转换为Array，方法是调用Array.from并将NodeList作为参数传递。

最后，使用Array.protoype.forEach遍历元素并将display属性设置为none

Array.from(document.querySelectorAll('.post-content a')).forEach(anchorEl => anchorEl.style.display = 'none');

<body>
  <div class="post-content">
    Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>
  <div class="post-content">
    Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>
  <div class="post-content">
    Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>

票数 1

Stack Overflow用户

发布于 2019-07-17 02:10:00

这一行：

$('.post-content').text(function(_, txt) {
  return $.trim(txt.split('-').pop());
});

将div中的html替换为文本。“阅读更多”现在不再是一个链接，而只是文字。因此，当您尝试隐藏链接时，单词将不再用标签包装。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57063041

复制

相似问题

问如何使用jquery删除“阅读更多”？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery删除“阅读更多”？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery删除“阅读更多”？
EN