时间戳

首页 > 解决方案 > 如何从具有多个兄弟姐妹的div中删除文本

javascript - 如何从具有多个兄弟姐妹的div中删除文本

问题描述

<div class="latest_posts style3 latest_posts--style2 latest_posts2 clearfix eluidf4c60403  latestposts2--dark element-scheme--dark">
<h3 class="m_title m_title_ext text-custom latest_posts2-elm-title" itemprop="headline"></h3>
 VIEW ALL               
<ul class="posts latest_posts2-posts">
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/law-for-bank/" itemprop="headline">Law For Bank</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/tech-blog/" itemprop="headline">Tech Blog</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/blog-about-tech-and-telcos/" itemprop="headline">Blog About Tech and Telcos</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
 </ul>
<div>

<div class="latest_posts style3 latest_posts--style2 latest_posts2 clearfix eluidf4c60403  latestposts2--dark element-scheme--dark">
<h3 class="m_title m_title_ext text-custom latest_posts2-elm-title" itemprop="headline"></h3>
 VIEW ALL               
<ul class="posts latest_posts2-posts">
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/law-for-bank/" itemprop="headline">Law For Bank</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/tech-blog/" itemprop="headline">Tech Blog</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/blog-about-tech-and-telcos/" itemprop="headline">Blog About Tech and Telcos</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
 </ul>
<div>

`

查看银行的所有法律 2020 年 12 月 4 日 技术博客 2020 年 12 月 4 日 关于技术和电信公司的博客 2020 年 12 月 4 日`我们如何从给定的内容中删除“查看所有”文本`如何才能做到。

标签： javascriptjquerycss

解决方案

要访问文本节点，您必须检查nodeNameElement 的值是否等于"#text"I 在这种情况下，我获取DIVwith 类的所有内容，并在获取具有 a 的元素后latest_posts使用该属性访问它的所有子 节点。childNodesquerySelector

检索列表后，children我可以遍历该列表并仅返回非类型的子项#text

let latest_posts = document.querySelector('.latest_posts');
let newContent = latest_posts.cloneNode();

newContent.innerHTML = "";

Array.from(latest_posts.childNodes).forEach(child => {
  if(child.nodeName != "#text") {
    newContent.append(child);
  }
});

latest_posts.innerHTML = newContent.innerHTML;
<div class="latest_posts style3 latest_posts--style2 latest_posts2 clearfix eluidf4c60403  latestposts2--dark element-scheme--dark">
<h3 class="m_title m_title_ext text-custom latest_posts2-elm-title" itemprop="headline"></h3>
 VIEW ALL               
<ul class="posts latest_posts2-posts">
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/law-for-bank/" itemprop="headline">Law For Bank</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/tech-blog/" itemprop="headline">Tech Blog</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
   <li class="post latest_posts2-post">
      <h4 class="title latest_posts2-title"><a class="latest_posts2-title-link" href="http://wpstaging.a2zcreatorz.com/deloitte/design/blog-about-tech-and-telcos/" itemprop="headline">Blog About Tech and Telcos</a></h4>
      <div class="latest_posts2-date"><span>December 4, 2020</span></div>
      <div class="latest_posts2-itemSep  clearfix"></div>
   </li>
 </ul>
<div>

推荐阅读