CODEWITHSUNDEEP
javascriptarraysvue.js
Yahoo
Yahoo

Reputation: 568

Vue onclick delete particular row

I have two button called ADD and REMOVE LAST ROW. If I click on ADD it will add new input field and if I click on REMOVE LAST FIELD it will delete the last row. When we click ADD it will display input field with a button called REMOVE THIS ROW, is there a way to make that button REMOVE THIS ROW delete the particular field or row?

Like if I pressed ADD button three times 1,2 and 3. Then if I click on REMOVE THIS ROW button for second one, then remove the second one.

View

<div id="app">
  <div class="work-experiences">

      <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

        <div class="col">
          <br>
          <label id="minorHeading">FULL NAME</label>
          <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg"/>
        <button type="button" class="btn btn-outline-info">Remove this row</button>
        </div>

      </div>

    </div>

      <br>

      <div class="form-group">
        <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
        <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
      </div>
</div>

Script

new Vue({
  el: "#app",
  data: {
    minorsDetail: [
     {
       full_name: "",
       date_of_birth: "",
     }
    ],
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },

    addExperience(){
          this.minorsDetail.push({
            full_name: ''
          })

    },

    removeExperience: function(todo){

          var index = this.minorsDetail.indexOf(todo)
          this.minorsDetail.splice(index, 1)
          this.removeMinorFieldFunction();
    },

  }
})

Below is the code on JsFiddle

https://jsfiddle.net/ujjumaki/y0k8fnp3/10/

Upvotes: 0

Views: 2264

Answers (2)

Kharel
Kharel

Reputation: 827

new Vue({
  el: "#app",
  data: {
    minorsDetail: [{
      full_name: "",
      date_of_birth: "",
    }],
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    },

    addExperience() {
      this.minorsDetail.push({
        full_name: ''
      })

    },

    removeExperience: function(todo) {

      var index = this.minorsDetail.indexOf(todo)
      this.minorsDetail.splice(index, 1)
      // this.removeMinorFieldFunction();
    },

  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="work-experiences">

    <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

      <div class="col">
        <br>
        <label id="minorHeading">FULL NAME</label>
        <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg" />
        <!-- add onclick listener removeExperience for this row. all your logic is perfectly fine  -->
        <button type="button" @click="removeExperience(minordatabase)" class="btn btn-outline-info">Remove this row</button>
      </div>

    </div>

  </div>

  <br>

  <div class="form-group">
    <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
    <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
  </div>
</div>

Upvotes: 1

akuiper
akuiper

Reputation: 214927

Simply add a click event to the button and remove element by index:

<button 
  type="button" 
  class="btn btn-outline-info" 
  @click="minorsDetail.splice(index, 1)">Remove this row</button>

https://jsfiddle.net/81v6zwxt/

Upvotes: 2

Related Questions