Tips for deleting content from a div that contains numerous siblings

<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>         
<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 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>
       
<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>

`How can we remove the "VIEW ALL" text from this given ` how can it be done.

Answer №1

When trying to access a text node, you need to check if the nodeName value of an Element is equal to "#text". In this scenario, I extract all the content within the DIV with the class latest_posts and navigate through its children by utilizing the childNodes property following the selection of that element via a querySelector.

Once I have retrieved the list of children, I iterate over that list and only return those which are not of type #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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When you try to import from another file, the method is not defined

When I attempt to import a method from another file, I am encountering an issue where it returns undefined. The structure involves 3 files with one calling the next in sequence. File1: const { methodFromFile2 } = require('./file2'); methodFromFi ...

The React Map function does not trigger a re-render of the component whenever the state array is modified

I am currently working on developing a todo app using the material UI select field along with Formik's withFormik for educational purposes. I have successfully implemented the add functionality; however, I am facing an issue when trying to delete an i ...

Combining two JSON arrays into a single array using Node.js

Two JSON arrays are available: var json1 = [{id:1, name: 'xxx' ...}] var json2 = [{sec:'A', class_name:'xyz' ...}] I am looking to combine these arrays into a single array. var finalObj = [{id:1, name: 'xxx' ...},{i ...

Tips for showing off MySQL databases using PHP and AJAX

Currently facing an issue where the console is returning "ID is not defined" error. I am trying to use the "url: id" statement to select a button based on its id, retrieve a result, and display it on a div in the index. <script type="text/javascript"&g ...

Ways to change a portion of a string with javascript regular expressions

Seeking guidance on isolating the width attribute in CSS: oldStyle = "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;" Considering this code snippet: oldStyle.replace(new RegExp("width:[0-9]+%;.*$", ...

Assign a value to the active textbox using JavaScript

Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...

Waiting for content to load in Angular's UI-Router

Working with UI-Router in Angular 1.7, I am facing an issue wherein I want to change the state and wait for the content to load before scrolling to the bottom of the page. // Using a class method onCreate() { this.post().then(response => { ...

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

Convenient Method for Making POST Requests with the Node Request Module and Callback

Does the .post() convenience method in Javascript/Node's request module accept a callback? I'm confused why it would be throwing an error like this: var request = require('request'); request.post({url: 'https://identity.api.foo/v ...

Generating interactive elements in VUE is key

I am unsure about how to dynamically create components without using the <component :is=''> tag. I would like to insert a component into the DOM through JavaScript. Similar to how you would add a new modal in jQuery with $("body").append(" ...

Troubleshooting the rendering issue with Angular5 observables in displaying the list

I've been exploring Observable in angular5 and I'm facing an issue with my code. Component.ts file export class CommerceComponent implements OnInit { public List$: Observable<any>; getData(id){ this.List$ = this.gateway.search(id); ...

What is the best way to adjust the border-radius of a mat-form-field in Angular?

<mat-form-field class="new-inputs" style="border-radius: 10px;"> <mat-label>Ime</mat-label> <input matInput type="text" maxlength="15" id="firstName" fo ...

Customizing Material-UI Grid: Is it possible to assign a background color solely to the cells, without affecting the surrounding empty spaces?

I've been experimenting with designing a grid system that incorporates a gradient background color. The issue I'm facing is that the background color extends to the empty spaces between the grid cells as well. Is there a way to scope the gradient ...

Limit Table Search to Specific Dynamic Key Values in JavaScript ArrayObjects

Currently, I am in the process of developing a customized search feature that involves working with an array of objects. const data = [{ name: "Janet McKenly", age: 49, city: "Baltimore", active: "2019-02-15", ...

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

Is it possible to perform unit testing on an onClick function that does not rely on a mouse click event?

My question is related to an onClick function in React const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => { if (e) { this.props.log(); } } I'm wondering how I can test using jest and enzyme ...

The URL in the dropdown menu on an Android device is unresponsive

I am facing an issue with the navigation menu on my website. It works perfectly fine on desktop and Apple devices, but on Android devices using Chrome, there is a problem. The submenu opens correctly, but when trying to click on a link within the submenu ...

What is the reason for the jquery datatable never being reinitialized?

I've been struggling to get this right, but unfortunately, I keep failing. The issue arises when I call the filltblServicesReport function, which is primarily responsible for initializing the database. Initially, it works perfectly fine; however, upon ...

Converting a UUID from a string to an integer in JavaScript

Need help passing a UUID to a function that calls an endpoint to delete a blog. The UUID is in string format like "9ba354d1-2d4c-4265-aee1-54877f22312e" and I'm encountering a TypeError: Cannot create property 'message' on string '9ba35 ...

React Component for Toggling a Click Event on a Select Tag

I'm currently developing a react app where clicking on a specific text triggers the display of a select tag with several items. However, I've encountered two issues: Upon clicking the text, the select tag appears on ALL list items instead of ju ...