Utilize VueJS to remove a designated HTML div upon clicking the delete button

Question

Utilize VueJS to remove a designated HTML div upon clicking the delete button

I'm having trouble with a delete button on my input fields. The goal is for the delete button to remove all related input fields when clicked, but it's not working as expected.

HTML

<div v-for="index in 10" class="form-group row" for="switch-id2" v-if="isShow2">
    <br><br>

    <div class="col-md-2">
        <b-form-fieldset>
            <label>Pincode</label>
            <div id="app">
                <treeselect placeholder="Enter the pincode(s)" :options="options" :value="value"
                    :multiple="multiple">
                    <div slot="value-label" slot-scope="{ node }">{{ customLabel }}</div>
                </treeselect>
                <p>
                    <label><input type="checkbox" v-model="multiple">Multi-select</label>
                </p>
            </div>
        </b-form-fieldset>
    </div>
    <div class="col-md-2">
        <label>Supply Chain</label>
        <b-input-group>
            <select class="form-control" id="supplyChain" name="supplyChain" v-model="supplyChain">
                <option selected value="">Select</option>
                <option value="b2bRegular">Dummy</option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>ODA category</label>
        <b-input-group>
            <select class="form-control" id="odaCategory" name="odaCategory" v-model="odaCategory">
                <option selected value="">Select</option>
                <option value="nonODA">Default</option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>ODA TAT</label>
        <b-input-group>
            <select class="form-control" id="odaTat" name="odaTat" v-model="odaTat">
                <option selected value="">Select</option>
                <option value="1>1</option>
                <option value="2">2</option>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>FM Facility</label>
        <b-input-group>
            <select class="form-control" id="fmFacility" name="fmFacility" v-model="fmFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>LM Facility</label>
        <b-input-group>
            <select class="form-control" id="lmFacility" name="lmFacility" v-model="lmFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2" style=-"margin-top:-2em; margin-left:0em">
        <label>RTO Facility</label>
        <b-input-group>
            <select class="form-control" id="rtoFacility" name="rtoFacility" v-model="rtoFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2" style="margin-top:-2em; margin-left:0em">
        <label>RVP Facility</label>
        <b-input-group>
            <select class="form-control" id="rvpFacility" name="rvpFacility" v-model="rvpFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <b-button type="button" class="btn btn-danger" title="Delete pincode" style="font-size: 20px;"
        onClick=""><i class="fa fa-trash"></i>
    </b-button>
</div>

JS code

import CryptoJS from 'crypto-js';
import VueElementLoading from 'vue-element-loading';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'dummy',
  components: { VueElementLoading, Treeselect },
  data() {
    return {
      isShow2: true,
      multiple: true,
      value: null,
      options: [203207, 234567, 324353, 201301, 201303, 122413].map(i => ({
        id: i,
        label: `${i}`,
        customLabel: `Custom Label ${i}`,
      })),
    }
  },
  props: {
    msg: String,
  },
  mounted() {

  },
  methods: {
    thisFileUpload() {
      document.getElementById("file").click();
    }
}
}

When clicking the red delete button in the image, the Pincode, Supply chain, ODA TAT, FM facility, LM facility, RTo facility, RVP facility input fields should be removed.

javascript html css vue.js frontend

Answer 1

Answer №1

After the discussion in the comments above, it became clear that the goal is to manage the visibility of individual rows independently.

The solution remains the same: have the "delete" button update a state variable, and use that variable to control the display of the row you want to delete.

The only difference now is that if you're managing the visibility of multiple items, you'll need separate state variables for each one.

Typically, your state data would be organized in an array structure, especially if you plan on having different data in each row; instead of taking shortcuts like

<div v-for="index in 10">

You would set it up like this:

data() {
    return {
      rowData: [
         {isShown: true, /* other row data here */},
         {isShown: true, /* other row data here */},
         {isShown: true, /* other row data here */},
         /* ...and so forth */
      ],

Then, your rendering loop would iterate over the rowData array (keeping in mind not to use v-for and v-if on the same element):

<template v-for="(row, index) in rowData">
  <div v-if="row.isShown">
    /* content here */
    <button v-click="hideRow(index)">Delete</button>
  </div>
</template>

Each delete button within a row can pass its index to the click handler, which then knows which element to update the isShown property for (by replacing rowData with a new array where rowData[index].isShown becomes false.)

Answer 2

After the discussion in the comments above, it became clear that the goal is to manage the visibility of individual rows independently.

The solution remains the same: have the "delete" button update a state variable, and use that variable to control the display of the row you want to delete.

The only difference now is that if you're managing the visibility of multiple items, you'll need separate state variables for each one.

Typically, your state data would be organized in an array structure, especially if you plan on having different data in each row; instead of taking shortcuts like

<div v-for="index in 10">

You would set it up like this:

data() {
    return {
      rowData: [
         {isShown: true, /* other row data here */},
         {isShown: true, /* other row data here */},
         {isShown: true, /* other row data here */},
         /* ...and so forth */
      ],

Then, your rendering loop would iterate over the rowData array (keeping in mind not to use v-for and v-if on the same element):

<template v-for="(row, index) in rowData">
  <div v-if="row.isShown">
    /* content here */
    <button v-click="hideRow(index)">Delete</button>
  </div>
</template>

Each delete button within a row can pass its index to the click handler, which then knows which element to update the isShown property for (by replacing rowData with a new array where rowData[index].isShown becomes false.)

Utilize VueJS to remove a designated HTML div upon clicking the delete button

Answer №1

Similar questions

Replace the bullet icon with a double quote symbol

Incorporating a polygon into vue2-leaflet framework

Ways to programmatically increase the names of variables in JavaScript?

The properties of the box model applied to unidentified inline boxes

Implementing jQuery UI in ASP.NET Web Forms

Unusual problem arises when working with exclusions and inclusions in tsconfig.json

How come my web page is not displaying the guages from guage.js?

center items after aligning floats

Spin a three-dimensional cube on a platform using three.js with a unique functionality

Generating pages dynamically based on the number of divs

Trouble hindering mouseup event on Android despite using preventDefault()

Vue developer proxy rule getting overlooked

Issue with Heroku: Unable to serve images through NodeJS Express server

Instructions on making one script activate another [jQuery] for resizing and enlarging a search box

Leverage the power of Next.js Dynamic routing query object with an SWR fetch request

Error message: "Cookie not found upon initial visit"

Incorporating hCaptcha into Laravel Jetstream with Inertia.js

Performance problems with Kinetic JS in Chrome and Opera

Using Nativescript Vue to dynamically change the image src.decode in order to show a font icon

Is it possible to deploy Vue.js from a content delivery network (CDN) for production