Append/ Remove Dynamic Elements Problems using Vue

JavaScript
1

Hey guys, I have been building a little side project and I am having trouble removing elements of the .todo class and what has been happening is that the initial list element on the page works fine when the xbutton is pressed.

However, when I add multiple elements then press the X beside the very first input, they all disappear! Not only that but when I add them again using the button (which is working fine) the xbutton beside each of them refuses to work.

I am perplexed, how do I make the xbutton work properly on all the appended inputs, while simultaneously only deleting the single input alongside it. Thanks guys!!!

Here is my pen-----> https://codepen.io/ismailhozain/pen/oMYzwY?editors=0010

3

Thanks man. I will try to rewrite it using a jQuery event listener, and I will go from there.

4

Yeah I just rewrote it using the jQuery click function and the same problem ensued.
It removes the very first list item only when you press it once and then doesn’t work after. It’s really weird.

5

You are doing a lot of mistakes like:
1st:

$( ".xbutton" ).click(function() {
  $(".liclass").remove();
});

this one will delete ALL elements having the class “liclass”.

2nd:
In your “addthreemorefunction” vue method you are manually adding three more elements that are including this:

<button class="xbutton" v-on:click="xfunction">X</button>

but you have no vue method called “xfunction” defined, so when you click any of the new added btns nothing will happen.

I can go on but i think you should see some free videos of Jeffrey Way on laracasts about vue.

Hope it will help you with the vue project. Happy coding

6

You are right. As for the xfunction in Vue, I had one defined before and I was having the same problems so I removed it and wrote the .xbutton function that you mentioned above, but it did not work. As for the .append elements in the “addthreemore” function can I just set it to a variable and do something like this?

var appendingXThree=$("ol").append('<li class="liclass"> <input class="inputs" id="todoinputsid"> <button class="xbutton" v-on:click="xfunction">X</button></li>');
appendingXThree.repeat(3);

Here is the xfunction in Vue that I deleted, but it is back now.

xfunction: function() {
    (".liclass").remove();
  }

SInce you mentioned that targeting the elements by the liclass would be removing them all, how do I make it only remove the one beside it?

Also, thanks for the screencasts