How to remove parent element in Vue Js by On Click Event?

Question

I use vue js in laravel framework.

Here, i need to remove the parent on click event of a child element (button).

My HTML :

<div id="campaign">
  <div class="parent_class">
    <input type="button" @click="remove_me($event)" class="remove_block">
  </div>
.....
  <div class="parent_class">
    <input type="button" @click="remove_me($event)" class="remove_block">
  </div>
</div>

Vue JS:

var campaign = new Vue({
el: '#campaign',
data: {
    n: 1
},
methods: {
    remove_me: function ($event) {
        var confirm_delete('Are you sure to remove ?');
        if(confirm_delete){
               // How to Remove Parent Element [parent_class] ?
        }
    }
  }
});

I want to remove the parent element('parent_class') on click its child element(button).

This Html has multiple parent classes.

I need to remove the closest parent class via "Vue Js"

ArthurG · Accepted Answer · 2016-11-29 10:45:01Z

1

I think this is what you are looking for:

http://jsbin.com/figubitiro/edit?html,js,output

Code extracted from the example:

Vue.component('category', {
  props : ['category'],
  template : '<div>{{ category.name }} <button @click="remove">X</button></div>',

  methods: {
    remove: function() {
      this.$parent.categories.$remove(this.category);
    }
  }
});
new Vue({
    el : '#some-id',
    data : {
        categories : [
          { id : 1, name : 'cat name' },
          { id : 2, name : 'another cat'},
          { id : 3, name : 'third cat'}
        ]
    }
});

Source(google): https://laracasts.com/discuss/channels/vue/how-to-remove-component-from-parents-array

answered Nov 29, 2016 at 10:45

ArthurG

3552 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shankar Thiyagaraajan Over a year ago

But the components are generated in dynamically. like on click. So i'm not have any array or record to process deletion.

Collectives™ on Stack Overflow

How to remove parent element in Vue Js by On Click Event?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related