I'm new to Vue. I can not remove an item from a DOM, in Vue.js Javascript file. I successfully managed to make an ajax post request, which removes a specific record from my database.

Once it's removed, I need to remove it from a DOM, so it won't shop up without need to reload the same page - I guess you know what I mean.

I can do it in jQuery, but I wonder how it should be done in Vue.js actually ?

Here is my portion of the code:

// SOME CODE BEFORE ...

onSubmit: function(e){
    e.preventDefault();

    $tablerow = this.el.parentNode.parentNode;

    // Assign a correct submit request type and url
    this.vm
        .$http[this.getRequestType()](this.el.action)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this))
    ;
},

onComplete: function(){

    // Remove the item from a DOM  <<< I NEED TO REMOVE PARENT <tr/> ELEMENT
    $(this.el).closest('tr').fadeOut(300, function(){
        this.remove();
    });

    // If plete message exists, use it as a feedback
    if(this.paramsplete){
        alert(this.paramsplete);
    }
},

// SOME CODE AFTER ...

Any suggestion please ? Sorry if my question is dumb, but I have not best knowledge in programming.

I'm new to Vue. I can not remove an item from a DOM, in Vue.js Javascript file. I successfully managed to make an ajax post request, which removes a specific record from my database.

Once it's removed, I need to remove it from a DOM, so it won't shop up without need to reload the same page - I guess you know what I mean.

I can do it in jQuery, but I wonder how it should be done in Vue.js actually ?

Here is my portion of the code:

// SOME CODE BEFORE ...

onSubmit: function(e){
    e.preventDefault();

    $tablerow = this.el.parentNode.parentNode;

    // Assign a correct submit request type and url
    this.vm
        .$http[this.getRequestType()](this.el.action)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this))
    ;
},

onComplete: function(){

    // Remove the item from a DOM  <<< I NEED TO REMOVE PARENT <tr/> ELEMENT
    $(this.el).closest('tr').fadeOut(300, function(){
        this.remove();
    });

    // If plete message exists, use it as a feedback
    if(this.params.plete){
        alert(this.params.plete);
    }
},

// SOME CODE AFTER ...

Any suggestion please ? Sorry if my question is dumb, but I have not best knowledge in programming.

• javascript
• jquery
• ajax
• vue.js
• vue-resource

• You are already using jQuery, why not just stick with it? Vue.js is technically a Javascript file, so the way you are currently using .remove() is in the Javascript capacity. If you were to, however, say $(this).remove() that would be using .remove() in the jQuery sense of the function. Also, it should be noted that jQuery is also built around Javascript – Adjit Commented Mar 16, 2016 at 19:39
• Yeah, but as I mentioned, I was wondering how to do it in Vue.js. In the sake of performance, what's better between vue or jquery ? – aspirinemaga Commented Mar 16, 2016 at 19:47

1 Answer 1

Normally you will have a list of items you are displaying with v-for in your table rows which are stored in an array. After your ajax call you can remove this item using this.items.$remove(item) and it will be automatically removed from where it is displayed in the DOM.

Since you didn't show your template I will try to recreate a similar scenario of what i think you are trying to do

data: function(){
   return {
       items: ['item1','item2','item3']
   }
},

methods: {
    remove: function(item){
        ajaxCall.then(function(){
            this.items.$remove(item);//will remove the <tr> from the DOM 
        });
    }
}

Your template can be like

<tbody>
  <tr v-for="item in items" v-on:click="remove(item)">{{ item }}</tr>
</tbody>