Home>

I am a beginner studying various things
Thank you.

Error message

Thank you for I want to delete myself and my parent by pressing button using vue
I wanted to apply it, but it doesn't work.

Applicable source code

// In the beginning, the following div elements are hidden
 
   <button @ click = "deleteDom">Delete</button>
 
<button @ click = "addDom">Increase</button>

Press the button to increase

 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
<Button @ click = "addDom">Increase</button>

And remove class = "dispNone" and duplicate or press the delete button (@ click = "deleteDom)


   <Button @ click = "deleteDom">Delete</button>
 
<Button @ click = "addDom">Increase</button>

Or delete like
. dispNone {
  display: none;
}
window.Vue = require ('vue');
const app = new Vue ({
    el: '#app',
    data: {},
    methods: {
AddDom: function () {
          // I want to draw a method for the button to remove the class here and increase it, but I'm not sure.
        }
      deleteDom: function (e) {// For deletion. I have diverted something that was referred to in previous questions.
            var del = e.target.parentNode;
            del.parentNode.removeChild (del);
        }
    }
Supplemental information (FW/tool version etc.)

I am a beginner. Please point out any missing knowledge or information.

  • Answer # 1

    There is yambejp's answer, so I will tell you another way to answer vue.

    
      
        

          {{item.name}}     

              
    const DATA_TEMPLATE = {
      name: 'sample',
      value: 1
    }
    new Vue ({
      el: '#app',
      data () {
        return {
          items: []
        }
      },
      methods: {
        add () {
          this.items.push (DATA_TEMPLATE)
        },
        remove (index) {
          this.items.splice (index, 1)
        }
      }
    })

    Vue and other frameworks feature bi-directional binding and are suitable for controlling HTML rendering in synchronization with data, so if you want to create this behavior by directly manipulating the DOM I think it ’s smarter alone.

  • Answer # 2

    I'm sorry! Almost dom processing without vue-likeness
    add can be anything, but del is troublesome to let the added one inherit
    Inherited from parent element