Javascript 如何通过单击事件删除Vue Js中的父元素？

我在laravel框架中使用vue js

在这里，我需要删除子元素（按钮）的父单击事件

我的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>

我想在单击其子元素（按钮）时删除父元素（“父类”）

此Html有多个父类

---

我需要通过“Vue Js”删除最近的父类

我想这就是您想要的：

从示例中提取的代码：

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'}
        ]
    }
});

Vue.component（'category'{
道具：[“类别”]，
模板：“{category.name}}}X”，
方法：{
删除：函数（）{
this.$parent.categories.$remove（this.categories）；
}
}
});
新Vue({
el:“#某个id”，
数据：{
类别：[
{id:1，名称：'cat name'}，
{id:2，名字：'另一只猫'}，
{id:3，名称：'第三只猫'}
]
}
});

---

来源（谷歌）：

但组件是动态生成的。就像点击一样。所以我没有任何数组或记录来处理删除。

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'}
        ]
    }
});