Removing a grand-parent TR node from a table using Vue JS by triggering a method on click

I am trying to create a function that will delete the parent of the parent node of a button element when it is clicked. The code I have written so far does not seem to be working and no errors are being thrown. Can anyone help me figure out how to achieve this?

Here is an example of the script I am using:

data () {
         return {
            items: []
         }
      },
 methods: {
             deleteItem(event){
                let con = confirm('Are you sure?');
                if(con) {
                   let par = event.target.parentNode.parentNode;
                   for( let i = 0; i < par.length; i++) {
                      if(event) {
                         this.items.items.splice(i, 1);
                      }
                   }
                }
             },
    }

Here is an example of the table structure:

<table>
   <thead>
      <tr>
         <th>Item</th>
         <th>Delete</th>
      </tr>
   </thead>
   <tbody>
      <tr v-for="item in items">
         <td><input type="text" v-model="item.q" required></td>
         <td><button v-on:click.prevent="deleteItem">X</button></td>
      </tr>
   </tbody>
</table>

Any help would be greatly appreciated,

-S

Answer №1

Expanding on previous remarks.. you can simply eliminate the item and rely on re-rendering to remove the old DOM automatically.

For instance, update your handler to transmit the current item reference:

v-on:click.prevent="removeItem(item)"

Then exclude it in your removeItem function:

removeItem(item) {
  this.items = this.items.filter(it => it !== item);
}

Complete demonstration: https://codepen.io/anon/pen/YXWxQb

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

Is it possible to include choices in the number option for slash commands in discord.js v13?

I am currently working on creating a custom slash command that includes a numerical option. Utilizing the .addNumberOption() method for this purpose. Is there a method to restrict users from inputting numbers outside the range of 0-5 after entering the Di ...

Model in Sequelize does not get updated

I have a basic user model with two simple relationships: export const Password = sequelize.define("password", { hash: { type: DataTypes.STRING, allowNull: false, }, salt: { type: DataTypes.STRING, allow ...

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Recently, I embarked on a new project using NextJS and Supabase by following the tutorial available at this link. After completing the initial setup by updating the ".env.example" file to ".env.local" with the Supabase credentials, including creating a ne ...

Bootstrap Table encountering issues when displaying JSON data from Ajax response

I am currently struggling with an unusual issue. I have received a successful JSON response from the server, which I need to display in my Bootstrap Table. However, I am facing difficulty in displaying the JSON data in the Bootstrap Table while using AJAX ...

Establish a global variable within the utils.js module in a Node.js environment

Hey there, I'm currently in the process of trying to figure out how to properly define a global variable in node.js. I am aware that it's not considered best practice, but in this specific scenario, it seems like the only way to go without involv ...

What is the method for individually extracting values from HTML using class li?

Is there a way to extract each value from the HTML within the li class separately? I have tried various methods but none have been successful. Can anyone provide a solution? Here is my JavaScript code: $(document).ready(function() { $(".list-grou ...

Detect keypress within a BrowserWindow even when multiple BrowserView components are present

In my Electron application, I have a main BrowserWindow that contains the main user interface index.html, along with multiple BrowserView elements: browserWindow = new BrowserWindow({ width: width, height: height, frame: false }); browserWindow.webContents ...

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

Inexperienced individual asks: 'Is it possible to accomplish this task using Dojo and Ajax?'

On my website, there is a feature that sends an initial request to a web service. Once this request is sent, the user has to wait for a specific amount of time before being able to send a second request. During this waiting period, I would like a countdo ...

Incorporate a Three.js viewer within a WPF application

I am currently exploring the use of Three.js to develop a versatile 3D renderer that can run seamlessly on various platforms through integration with a "WebView" or "WebBrowser" component within native applications. I have successfully implemented this sol ...

Using a combination of different materials on a single mesh can lead to problems with z-index and clipping

Currently in my threejs project, I am attempting to apply two different materials to a mesh. One material has a solid color, while the other has a canvas texture. To achieve this, I have created both materials and added them to an array, which is then assi ...

Managing errors and error codes in React/Redux applications

I am currently exploring the most effective approach for managing errors, particularly when deciding between error codes and an errors object in response from my API. As I dive into building a multi-part form using react, each time a user progresses to th ...

Creating a personalized filter list in Vue Instant Search: A step-by-step guide

Currently, I'm utilizing Laravel Scout with Algolia as the driver. Vue is being used on the front end and I've experimented with the Vue instant search package, which has proven to be very effective. The challenge I am encountering involves cust ...

Rows in a table will not decrease when added anew

On a page that allows adding and deleting rows from a table of input fields, the following code functions properly for existing fields. However, when attempting to add new rows and delete them in a sequential manner that requires replacing the ID and name ...

The dot notation in JSON syntax allows for easy access

Recently, I've been struggling with referencing a variable in JSON dot notation within my meteor application. It seems that when trying to access respJson.userlower.name, userlower is not being recognized as a valid variable. Is there a workaround for ...

How do I convert the object value/data to lowercase in JavaScript using underscore for an HTML5 document?

I am working with an array of objects (arr) where each object consists of 3 properties (Department, Categories, ProductTypes). The values for these properties are a mix of upper and lower case. To perform a comparison between arr and a search filter (alrea ...

Setup does not reactively track changes in props arguments

I've been working on creating a component that can compile HTML code provided to it. So far, I've been successful with static HTML texts, but I'm facing challenges when dealing with dynamic HTML texts. main.js app.component("dyno-html& ...

Creating interactive dropdown menus with PHP and Catalyst using Jquery

Currently, I am working on incorporating cascading dropdown menus into a catalyst web app. The main goal is to allow users to select a database table from the first dropdown menu and have the columns of that table populate the second dropdown menu. To achi ...

Using a try block inside another try block to handle various errors is a common practice in JavaScript

In an effort to efficiently debug my code and identify the location of errors, I have implemented a try-catch within a try block. Here is a snippet of the code: for (const searchUrl of savedSearchUrls) { console.log("here"); // function will get ...

Browser now replacing attribute translate="yes" with translate="translate"

We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...