vueを使用してbuttonを押すことで自分自身と親を削除するようにしたい

Question

前提・実現したいこと

表題の通り、buttonを押すことで
自分とその親を削除したいです

該当のソースコード

<div id="app">
 <div id="dom1">
   <button id="button" @click="deleteDom">削除</button>
 </div>
</div>

を

<div id="app">

</div>

にしたい

window.Vue = require('vue');

const app = new Vue({
    el: '#app',
    data: {},
    methods: {
      deleteDom:function(){
      //この中身がわかりません
      //描いてみたのは以下の通りです
　　　　　　let delete = document.getElementById("button");
        　delete.parentNode.removeChild(button);
      }
    }

補足情報（FW/ツールのバージョンなど）

vue使用中です。
初心者です。理解不足なところ、足りないところありましたらご指摘ください

Answer 1

DOMを直接削除というよりはv-ifでフラグによって描画させないようにしてはどうでしょうか。

<div id="app">
 <div id="dom1" v-if="!deleteFlag">
   <button id="button" @click="deleteDom">削除</button>
 </div>
</div>

window.Vue = require('vue');

const app = new Vue({
  el: '#app',
  data() {
    return {
      deleteFlag: false
    }
  },
  methods: {
    deleteDom() {
      this.deleteFlag = true
    }
  }
})

Comments

[kentooooo]

一応jsfiddleで動作確認したのですが、何も動作しないので困っています…

[nt4c]

jsfiddleで確認する際はrequireではなくjsfiddleのリソースにvue.jsを追加してからご確認ください。
https://jsfiddle.net/0vy5j17z/

[kentooooo]

できました。なるほどです。
本当にありがとうございました！

Answer 2

自分とその親を削除

親の掴み方次第ですね
「#dom1」を利用していいなら

const app = new Vue({
el: '#app',
data: {},
methods: {
deleteDom:function(){
  var del=document.querySelector('#dom1');
  del.parentNode.removeChild(del);
}
}
});

自分をベースに、親とその親を利用するなら

const app = new Vue({
el: '#app',
data: {},
methods: {
deleteDom:function(e){
  var del=e.target.parentNode;
  del.parentNode.removeChild(del);
}
}
});

Comments

[kentooooo]

ありがとうございました。
無事実装完了しました！