Remove specific HTML div when click on delete button using vuejs

So I have some input fields which are repetitive to fill different data. For every repetition, I also have a delete button. If I click on this delete button, then all the input fields related to this delete button should be removed. But this delete button is not working.

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();
    }
}
}

In the image, if I click the red delete button then Pincode, Supply chain,ODA TAT, FM facility, LM facility, RTo facility, RVP facility input fields should be removed.

Answer

In the discussion in comments above, I was not understanding that you’re trying to control the visibility of individual rows separately.

The basic answer is still the same: have your “delete” button set a state variable, and use that state variable to control the visibility of the element you want deleted.

The difference is that if you’re controlling the visibility of ten different things, you need ten different state variables.

Typically your state data would already be in an array structure, since you’re presumably going to be wanting to put different data in each of these rows; instead of this kind of shortcut

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

you would have something like

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

and your render loop would iterate over that rowData array (remembering that you shouldn’t have v-for and v-if on the same element):

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

The delete button in each row can pass the current row index on to the click handler, so the handler knows which element to update isShown for (by replacing rowData with a new array where rowData[index].isShown is false.)

Advertisement

Answer