How to delete HTML table row

Question

I am creating an HTML table row by clicking ADD using Vue.js. For each row I have a delete button on click I want to delete the current row.

The issue is tbody is defined in other component and thead is in other component.

I know how to delete

 Vue.component("form-row", { template: "#row-template", props: { itemname: String, quantity: Number, sellingprice: Number, amount: Number }, methods: { delete() { alert("tedt") } }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } }); new Vue({ el: "#app", data() { return { tableDatas: [] }; }, methods: { btnOnClick(v) { this.tableDatas.push({ itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button>Delete</button> </td> </tr> </script>

How can I do this, for deleting I know I can do like this

    delete(index) {
  console.log("Removing", index);
  this.tableDatas.splice(index, 1);
}

But tableDatas is defined in different component.

Answer 1

You should be able to simply $emit() the intent of deleting an item and attach appropriate handler for it.

Child

<button @click="$emit('delete')">Delete</button>

Parent

<form-row 
  v-for="(row, key) in tableDatas" :key="key" 
  v-bind.sync="row" 
  @delete="btnOnDelete(key)">
</form-row>

{
  methods: {
    btnOnDelete(key) {
      this.tableDatas.splice(key, 1);
    }
  }
}

 Vue.component("form-row", { template: "#row-template", props: { itemname: String, quantity: Number, sellingprice: Number, amount: Number }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } }); new Vue({ el: "#app", data() { return { tableDatas: [] }; }, methods: { btnOnClick(v) { this.tableDatas.push({ itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); }, btnOnDelete(key) { this.tableDatas.splice(key, 1); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } }); Vue.config.productionTip = false; Vue.config.devtools = false;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row" @delete="btnOnDelete(key)"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button @click="$emit('delete')">Delete</button> </td> </tr> </script>

Answer 2

You can use this.$parent to call parent method

Note: delete is a keyword in javascript so it cant be used as a function name

 Vue.component("form-row", { template: "#row-template", props: { index: Number, itemname: String, quantity: Number, sellingprice: Number, amount: Number }, methods: { deleteRow() { this.$parent.deleteRow(this.index) } }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } }); new Vue({ el: "#app", data() { return { tableDatas: [] }; }, methods: { btnOnClick(v) { this.tableDatas.push({ index: this.tableDatas.length, itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); }, deleteRow(index) { console.log("Removing", index); this.tableDatas.splice(index, 1); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button @click="deleteRow">Delete</button> </td> </tr> </script>

Answer 3

See the code attachment. enter image description here

$(document).ready(function () { $('input[type="submit"]').click(function () {
$(this).parent().parent().remove(); return false; }); });`