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

Using React to create multiple modals and dynamically passing props

Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...

javascriptreactjssemantic-ui

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

javascriptjqueryhtmlcss

What is the best way to fill a list-group using JavaScript?

Fetching ticket data from a controller is done using the code snippet below: $.ajax({ type: "GET", url: "/Tickets/List/", data: param = "", contentType: "application/ ...

javascript

Challenge with constructing HTML structures

I created a table in HTML: <table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable"> <thead> <tr> <th class="asc" width="30"><h3>ID</h3></th> <th width="200">&l ...

htmlcss

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

I've implemented the React Material-UI Autocomplete feature with checkboxes in my project. Here is what I have so far in my code (check out demo.js for details): https://codesandbox.io/s/material-demo-rxbhz?fontsize=14&hidenavigation=1&theme=d ...

javascriptreactjsmaterial-ui

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

css

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

What methods can be used to get npx to execute a JavaScript cli script on a Windows operating system

The Issue - While my npx scaffolding script runs smoothly on Linux, it encounters difficulties on Windows. I've noticed that many packages run flawlessly on Windows, but the difference in their operations remains elusive to me. Even after consulting A ...

javascriptnode.jsnpmnpx

The use of JSON.parse does not support parsing URL links

As a junior developer specializing in Javascript and Google Apps Script, I decided to enhance the functionality of my Google Sheets by tracking the last modification time of URLs stored in them. Although I attempted to create a script for this task, it see ...

javascriptjsonurlgoogle-apps-script

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

Struggling with getting the router to load a basic template after setting up a Yeoman angular scaffolder installation. Here's my configuration: // index.html <body ng-app="mvmdApp"> <div class="container" ng-view=""></div>// not ...

javascriptangularjscoffeescriptrouteryeoman

Utilizing Vue.js to dynamically add a class through computed properties

As a beginner in Vue.js, I want to dynamically add or remove classes based on certain conditions. Specifically, I am trying to remove the success class when the total sum exceeds 25, but for some reason the color is not changing as expected. Can anyone p ...

javascriptvue.js

Establishing a recurring interval when the component mounts for a specified period of time

I have read through several Q&As on this topic, but I am still unable to pinpoint what mistake I am making. The code snippet below is meant to display a countdown in the console and update the DOM accordingly, however, it only prints 0s in the console ...

javascriptreactjsasynchronoussetinterval

Tips for organizing data when parsing JSON in Javascript

I am facing a challenge with maintaining the order of JSON data that I am parsing using Javascript and displaying in an HTML SELECT element. The incoming data is already sorted, but I am encountering issues sustaining this order after decoding the JSON str ...

javascriptjson

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

I have recently started working with Vue and in my current project, I encountered a challenge where I needed to display 2 players in each row within a div. To achieve this, I utilized the display: grid; CSS property on the playerDiv id. However, I am facin ...

javascriptcsstwitter-bootstrapvue.jsvuejs2

"ModuleNotFound" error occurred when attempting to utilize Netlify lambda functions with external dependencies

https://i.stack.imgur.com/vVmky.jpg I'm currently exploring the capabilities of Netlify, specifically its lambda function feature for running a node function with dependencies. Following a tutorial from CSS-Tricks, my functions/submission-created.js ...

javascriptnode.jsnetlify

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

jquerycssajax

How can I transfer Gmail message using express rendering parameters?

Using passport-google-oauth for authentication and the node-gmail-api for fetching gmail, I aim to display gmail message after authentication. In order to achieve this, I have written the following code in routes.js: app.get('/profile', isLogged ...

javascriptnode.jsexpresspassport-google-oauth

Implementation issue with Hashids library in Vue.js causing functionality hiccups

I'm having trouble getting the library hashids to cooperate with vue.js The method I would like to use is: <template> <div class="container"> {{ hashids.encode('1') }} </div> </template> <script& ...

javascriptvue.jsvuejs2vue-componenthashids

The cross-origin resource sharing (CORS) functionality is functioning properly on the

I've encountered an unusual problem with express cors. While my Cors configuration works perfectly on localhost, it fails to function in the production environment. Every time I encounter the same error. Failed to load : Response to preflight r ...

javascriptnode.jsexpresshttp-status-code-503

"An ActionResult is received as null when the model is passed as an

Has anyone encountered a situation where the model is null when passed to the controller? I inserted an alert in the ajax call to verify the value and it seemed correct, but upon debugging on the first line of the controller's ActionResult, it shows a ...

javascriptc#ajaxasp.net-mvc