Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process.

The structure of the HTML code is as follows:

<table cellpadding=10>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: 123</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
</table>

This table consists of 1 row for the Table Header and then 4 rows of data.
There's a unique text Name: 123 in the first cell of the third data row.

To resolve this issue, I aim to hide/remove the specific row containing Name: 123.

My attempts at using CSS have been unsuccessful so far since there isn't a selector that targets elements based on a particular String.

What would be the best approach to hiding/removing the row with Name: 123? I'm open to utilizing either CSS or JS if necessary.

javascriptcssdom

Answer №1

Retrieve a list of the first child elements from each row in a table, and loop through them. If the text content matches "Name: 123", then remove the entire row from the page.

const cells = document.querySelectorAll('tr td:first-child');

for (let i = 0; i < cells.length; i++) {
  if (cells[i].textContent === 'Name: 123') {
    cells[i].parentNode.classList.add('hidden');
    break;
  }
}
.hidden { display: none; }
<table cellpadding=10>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: 123</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Name: XYZ</td>
    <td>Lorem Ipsum Description</td>
    <td>More Lorem Ipsum</td>
  </tr>
</table>

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

Issue with MERN stack: User not being saved in mongoDB despite lack of errors

Check out the repository at https://github.com/QexleLLC/Otlic After running the frontend with npm start, and starting the backend with nodemon server, everything appeared to be working fine. However, when I tried signing up by going to localhost:3000/sign ...

javascriptnode.jsreactjsexpressmern

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

javascripthtmllaravelvue.js

HTML list style with varying images at the same level in a ul tag

I am working on an Application that generates output with li tags. I am trying to find a way to apply different list-style-image for each li tag of the same level within the ul, while keeping the HTML code as simple as possible. Each li with a class of gre ...

htmlcsshtml-lists

Interacting with a Hapi JS API through a distinct Vue JS Frontend. The data in request.payload is not defined

As I take my first steps on Hapi JS, I am facing the challenge of connecting my app to a SQL Server DB. My current task involves sending login data from a Vue CLI JS frontend to a Hapi JS Api using axios. The login process essentially consists of a "SELEC ...

javascriptnode.jsvue.jshapi.js

Clicking on a button in the Shield UI Grid Toolbar will apply filters to

Currently, I am working with a grid that utilizes a template for the toolbar. In this grid, there is a column labeled "Status." My goal is to filter the rows so that only those where the Status equals Request to Reschedule, Cancelled, Office Call Required, ...

javascriptjqueryfilteringshieldui

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

SoundCloud and Vimeo have the capability to link their players across separate tabs, and even between tabs and embedded players

I find it intriguing how SoundCloud and Vimeo are synchronized with their tabs, so that when you play something in one tab, the others pause. It's worth noting that this feature only works on SoundCloud when two instances of the website are open, wher ...

javascripthtmlaudiovideosoundcloud

Encountering issues while attempting to utilize pdf2json in a TypeScript environment

When attempting to import pdf2json (3.0.1) into my Node project using TypeScript, I encountered the following error: "Could not find a declaration file for module 'pdf2json'." I also tried installing @types/pdf2json for TypeScript but found tha ...

javascriptnode.jstypescriptpdf2json

Error alert: Object expected on OnClientClick in Microsoft JScript runtime

I was in the middle of a quick test when I encountered an error. At this point, I haven't implemented any C# code yet and my aspx code looks like this: <script language=javascript type="text/javascript"> function myOnClick() { ...

asp.netjavascriptonclientclick

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Seeking assistance with using JavaScript to filter posts from Contentful for a Next.js website

Currently, I am integrating a Next.js blog with Contentful and employing queries to display posts on the homepage. While I can easily use .filter() to feature certain posts based on a boolean value, I am struggling to figure out how to fetch posts that mat ...

javascriptreactjsnext.jscontentful

There is a method in TypeScript called "Mapping IDs to Object Properties"

I'm currently developing a React app that features several input fields, each with its own unique id: interface IFormInput { name: string; surname: string; address: string; born: Date; etc.. } const [input, setInput] = useState< ...

javascriptreactjstypescript

Having trouble making changes to FontAwesome CSS using jQuery?

I am currently working on an MVC project where I am using Ajax to update a specific section of a View that contains a FontAwesome 5 icon. The FontAwesome icons are set using CSS classes, so my initial assumption was that it would be simple to remove and ad ...

jquerycssfont-awesomefont-awesome-5

What is the process for utilizing node modules within the Alexa Developer Console?

Struggling with creating an Alexa skill that utilizes a Node.JS API with a module requiring npm installation? Unable to upload the node modules due to the absence of an upload button and console for npm install? Seeking guidance on how to proceed? ...

javascriptnode.jsnpmmodulealexa-skills-kit

Steps for developing your own node package manager

Looking to create a CLI package manager application called mypkgname for your Github repository? You can easily install this package globally by registering it on npm: npm install -g mypkgname-cli mypkgname init myApp cd myApp npm install npm start Here ...

javascriptnode.jsgithubnpmcommand-line-interface

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

My client has a new requirement: adding functionality to increase font size, adjust contrast/brightness, and control sound on his website. When clicking on any of the control images, a slider should appear for the user to make adjustments accordingly. Ho ...

javascriptphpjqueryhtmlcss

What is the best way to create an array within an object in JavaScript?

Here is the code snippet I'm working with: var Memory ={ personAbove: "someone", words: wordsMem = [] <<<<<this part is not functioning properly } I need help figuring out how to make it function correctly. Specific ...

javascriptnode.js

Create a variety of colors with a simple click

A form has been created for the footer where clicking on an input causes the text and border-bottom to transition from grey to white. Visit Code Pen HTML: <div class="footer"> <div class="footerContainer"> <form> <inp ...

htmlcssformscss-transitions

The issue I'm facing with my webpack-build is the exclusive appearance of the "error" that

Hey everyone! I'm currently facing an issue with importing a module called _module_name_ into my React project, specifically a TypeScript project named react-app. The module was actually developed by me and it's published on npm. When trying to i ...

javascriptreactjstypescriptnpmwebpack

Are there any alternative methods for clearing form fields following a successful thunk dispatch in React?

When implementing a Post API call in Thunk, I dispatch a boolean success key for successful requests and an error message for errors. Now the goal is to clear form data upon success and display the error message upon an error. To achieve this, I utilize ...

javascriptreactjsreduxreact-reduxredux-thunk