Using JavaScript to search for a specific string within a row and removing that row if the string is detected

I need help with a script that removes table rows containing the keyword STRING in a cell. However, my current script is deleting every other row when the keyword is found. I suspect this has to do with the way the rows are renumbered after deletion. How can this be addressed? Thank you for any assistance.

<script type="text/javascript">
var table = document.getElementById("DatePreferred").firstChild;
var rowCount = table.rows.length;

for(var i=0; i<rowCount; i++) {
  var row = table.rows[i];
  var text = row.cells[0].innerText;
  if(text.indexOf("STRING")!=-1){
     table.deleteRow(i);
  }
 }
</script>

Update: While FishBasketGordo's solution fixed the issue in IE and Safari, it did not work in FF. Upon further investigation, I discovered that FF handles .innerText differently. To account for this, add the following lines to the script:

if (row.cells[0].textContent){
   var text = row.cells[0].textContent;}
else {var text = row.cells[0].innerText;}

Answer №1

My approach to tasks like this is to reverse-engineer the solution:

for(let j = totalRows - 1; j >= 0; j--) {
    let currentRow = myTable.rows[j];
    let content = currentRow.cells[0].textContent;
    
    if(content.includes("KEYWORD")){
        myTable.deleteRow(j);
    }
}

Answer №2

To remove a row, simply decrement the value of i using i-- in order for your for loop to revisit the same index, now representing the next row.

UPDATE: Upon reviewing your code once more, make sure to compare i to table.rows.length instead of your rowCount variable in order to accommodate the fluctuating length of table.rows.

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

What is the best way to receive the information that was transmitted to me through a callback function?

While web development is not my strong suit, I have a question that might sound silly, so bear with me as I explain. Once the user selects their desired purchase, an API call is made to generate a trans_id and redirects them to the bank's payment pag ...

React component rendering twice due to width awareness

In a React component that I've developed, I have utilized ResizeObserver to track its own width. Within this component, two divs are rendered with each having a "flex: 1" property to ensure equal width distribution. Under certain conditions, such as w ...

What is the best way to refresh a page during an ajax call while also resetting all form fields?

Each time an ajax request is made, the page should refresh without clearing all form fields upon loading Custom Form <form method='post'> <input type='text' placeholder='product'/> <input type='number&a ...

What measures can be taken to restrict users from inputting decimal values?

My website includes an order page where users can input quantities for various items. While some items allow for decimal quantities, others do not. What is the most effective method to restrict users from entering decimal quantities? (Besides using an ale ...

What is the best way to give a fixed height to Card content in Material UI? Is CSS the way to go?

I've been struggling with a design issue involving Material-UI cards used to display News. The problem arises when the paragraph section of the card occupies multiple lines of text. When it spans two lines, there is a 10px spacing between the paragrap ...

What sets Vue.js apart, class and staticClass - is there a distinction?

Can someone explain the distinction between class and staticClass in Vue.js render functions? While using Template Compilation, I noticed that the output varies based on what is provided to the HTML class attribute. For instance, when passing a single str ...

The proper usage of middleware in vue-router

I've set up routes in Vue and added some middleware conditions before each route, but it's not functioning as expected. Below is the content of my router/index.js file: const token = computed(() => useAuthStore().token); // Main Router cons ...

Creating a bespoke validation in AngularJS to verify if the selected date falls within a specific range of weekdays

Hey there! I'm looking to enhance the validation process for a date input field in a unique manner. Currently, my default validation setup looks like this: <div> <input type="text" name="firstName" ng-model="appointmentForm.firstName" ng- ...

List of recommended countries with their respective flags and descriptive text

I am currently working on creating a country suggestion list that includes flags next to the selected result. While I have been successful in generating the suggestion box based on the country names, I am looking to enhance it by displaying the respective ...

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Currently, I am building a todo app in nextjs to enhance my skills. However, I'm encountering some difficulties in deleting single todos from the database using the deleteOne function. Below is the frontend call: async function deleteTodo(id) { a ...

Tips for altering objects within an array

I am dealing with an array of objects that looks like this: const items = [ {name: 'Sam', amount: '455gbjsdbf394545', role: 'admin'}, {name: 'Jane', amount: 'iwhru84252nkjnsf', role: 'user'}, ...

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

As a newcomer to next.js, my goal for my project is to connect to a database, retrieve data, process it using express, and then utilize it on the client side of my application. I plan to establish a connection to the database within the express route han ...

KnockoutJS - Using containerless control flow binding with predefined values

Inside a select control, I am using ko:foreach instead of the usual bindings. Everything is working perfectly, except that the initial value for "specialProperty" is set to unknown even when the select control is set to Option 1. It behaves as expected o ...

Surprising "unexpected end of line" JavaScript lint notification out of nowhere

In this simplified version of my JavaScript code: function addContent() { var content = []; content.append( makeVal({ value : 1 }) ); // lint message generated } After running a lint program, I received the followi ...

Perform an action in jQuery when a class is modified

I am trying to create an event that will trigger when a specific element receives a class, and also when that class is removed. For example: <button id="my_butt_show">showtime</button> <button id="my_butt_hide">hide me</button> &l ...

Looking to convert a jQuery function to plain JavaScript code?

Struggling with my homework, I must apologize for any mistakes in my English. My task involves creating a chat using node.js and I found some code snippets on a website "" which I used successfully. The issue now is that the chat relies on old jQuery libr ...

Create a filter system using a MERN stack that incorporates regex, a search box,

In an effort to understand how the MERN stack operates as a cohesive unit, I have taken on a hands-on approach by following tutorials from bezcoder. These include guides on Node.js/Express/MongoDb (Github entire code) and Reactjs (Github entire code). Sam ...

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

A curated collection saved in LocalStorage using React JS

I have implemented a LocalStorage feature to create a favorite list, but it only adds one item each time the page is reloaded. The items are retrieved from a JSON file. For a demonstration of how my code functions, check out this link: const [ storageIte ...

"Troubleshooting: Why are errors not appearing in ts-node

Whenever I encounter an error in my code while compiling with ts-node, the error does not seem to appear in the console. For instance:let data = await fs.readFileSync(path); In the following code snippet, I am using "fs" to read a file by passing a path ...