retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this:

  <table id="tblTasks">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Due</th>
                    <th>Category</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
    </table>

Above the table, I also have a script like this:

<script id="taskRow" type="text/x-jQuery-tmpl">
    <tr>
        <td>${task}</td>
        <td>
            <time datetime="${requiredBy}">${requiredBy}</time>
        </td>
        </td>
        <td>${category}</td>
        <td>
            <nav>
                <a href="#" class="editRow" data-task-id="${id}">Edit</a>
                <a href="#" class="completed">Complete</a>
                <a href="#" class="deleteRow" data-task-id="${id}">Delete</a>
            </nav>
        </td>
    </tr>
</script>

Currently, when the Delete button is clicked, the following code is executed:

storageEngine.delete('task', $(evt.target).data().taskId, ....

In addition to this functionality, I now have a requirement of deleting all tasks. I am trying to figure out how to loop through all the rows in the table, locate the Delete buttons, and apply the storageEngine.delete function. Can you provide guidance on how I can achieve this?

Answer №1

Give this a shot:

const taskList = $(".deleteRow").map(function() {
 return $(this).data("task-id");
}).get();
console.log(taskList.join('/'));

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

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...

The option to clear searches is missing from the iOS interface

My application is designed to perform searches using post codes, and for the most part, it functions properly. However, I have encountered an issue where the clear icon on the right-hand side of the field does not display in certain browsers. To investiga ...

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

I'm currently working on a project where I need to extract specific objects from a JSON based on an array and then display this data in a table. Here's how my situation looks: playerIDs: number[] = [ 1000, 1002, 1004 ] The JSON data that I am t ...

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...

Performing CRUD operations with mongoose and express

My express app is currently being developed with mongoose, and the goal is to integrate it with React for the front end. In my customer controller, I have outlined some CRUD operations, but there are aspects of this approach that I find unsatisfactory. W ...

Can you explain the concept of a framework operating "on top of" node.js in a way that would be easy for a beginner to understand?

If someone is new to JavaScript, how would you explain the concept of "on top of node.js" in simple programming language? I am looking for a general explanation as well as specific reference to Express on top of node.js in the MEAN stack. Appreciate your ...

Encountering issue with accessing req.body within Next.js 13 middleware function

The issue I am facing in the code snippet below is related to validating the request body against a schema from zod. The current situation leads to failure and catches errors because req.body returns a ReadableStream<Uint8Array> instead of the expect ...

Establishing a distinct registry for a particular package within the .npmrc configuration file

Today, I encountered a new challenge that I've never faced before. I am currently in need of having private node packages published in both a private and public repository under the same @scope. The packages on npmjs.org are stable and open to the pu ...

What is the method for altering the choices within one selection based on the selection made in another dropdown menu

Welcome to the code snippet! <select id="type"> <option value="item1">item1</option> <option value="item2">item2</option> <option value="item3">item3</option> </select> <select id="size"> <option v ...

Enhanced JavaScript Regex for date and time matching with specific keywords, focusing on identifying days with missing first digit

I have a specific regular expression that I am using: https://regex101.com/r/fBq3Es/1 (audiência|sessão virtual)(?:.(?!audiência|sessão virtual|até))*([1-2][0-9]|3[0-1]|0?[1-9])\s*de\s*([^\s]+)\s*de\s*((19|20)?\d\d) ...

Increase the progress bar at regular intervals of x seconds

I am looking for a jQuery UI progress bar that will increase by x amount every x seconds. Once it reaches 100%, I need it to trigger a function to retrieve some content. Essentially, I need a timer-like feature. EDIT: Note that I do not require any code ...

What causes jquery to not trigger PHP when the HTML file resides in a different location?

In my project structure, I have a 'js' folder containing the jQuery function and a PHP script. The HTML file is located in a separate folder. Currently, the setup looks like this: /server/js/global.js /server/js/script.php /server/html/stude ...

Display information in real-time based on user input using Highcharts

I am trying to display data using highcharts on my index.php page. Can anyone help me with this?, here is what I have attempted so far: This is the HTML code I have: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" cont ...

How to load an iframe only upon clicking on a link

I am struggling to make the iframe popup appear only when a specific class link is clicked. Here is my HTML and JS code: Unfortunately, nothing happens when I click the link with the class 'aclass'. I have updated my JavaScript, but the issue ...

Adding a regional iteration of a library that was unable to be loaded

Recently, I have been experimenting with PhantomJS to capture screenshots of a webpage every five minutes. While the process runs smoothly most of the time, I encountered an issue where the AngularJS library fails to load intermittently. This results in th ...

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

Respond to adjustments in iframe height

I am currently working on a page with an embedded iframe. The height of the iframe may change dynamically while on the page. I am wondering if there is a way to adjust the height of the iframe based on its content. Even after trying to set the height at ...

Designing personalized sass components

Seeking advice on developing a custom CSS unit that can be utilized in Sass with Node.js. Is there a tutorial available for creating a Sass plugin specifically for this purpose? For instance, I am looking to establish a unit called "dpx" which functions as ...

Is there a significant time-saving benefit to utilizing nested rules in CSS, particularly when using HAML or LESS?

Here is how I am currently coding my CSS: Regular CSS: #content { color: white; background: black; } #content a { color: yellow; } #content p { margin: 0; } #content (etc...) #contnet (etc...) #content (etc...) (I always include the parent eve ...

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...