Home>

As the title suggests, pressing the button
I want to delete myself and its parent

Applicable source code

 
   <button @ click = "deleteDom">Delete</button>
 

The


I want to
window.Vue = require ('vue');
const app = new Vue ({
    el: '#app',
    data: {},
    methods: {
      deleteDom: function () {
      // I don't know what's inside
      // I drew the following
Let delete = document.getElementById ("button");
        Delete.parentNode.removeChild (button);
      }
    }
Supplemental information (FW/tool version etc.)

Vue is in use.
I am a beginner. Please point out if there is a lack of understanding or a lack of it

  • Answer # 1

    Rather than deleting the DOM directly, how about not usingv-ifto draw with a flag?

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

  • Answer # 2

      

    Delete me and its parent

    It depends on how your parents grab
    If you can use "# dom1"

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


    If you use parents and their parents based on yourself

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