Добавить и удалить элемент на JS/jQuery?

Question

[Zombie42679]

Хочу при нажатии на кнопку добавлять и удалять именно тот элемент на который нажали, без изменения других. А по факту всё очень плохо, добавляется вроде нормально, но при удалении стирается всё подряд + заново если добавлять уже идут какие-то баги.

https://jsfiddle.net/9wshLLt1/12/

Answer 1

[ThunderCat]

id - уникальный идентификатор элемента, больше одного на странице быть не должно, используйте класс элемента - <span class="delete_me">Удалить</span> и соответствующий селектор $('.delete_me').
Далее, новосозданные элементы не существовали на момент создания листенеров, соответственно не будут откликаться на вызов по клику, привязывать надо на document, и затем отслеживать нажатие на нужный класс:

$document.on('click', '.delete_me', function(){
    doStuff();
})

И обращаться надо не к div, а к $(this), элементу сработавшему на листенер(читайте про контекст событий).
https://jsfiddle.net/Luaoq64v/
И не надо использовать такую смесь чистого жс и жк, и в голове каша и в коде.

Answer 2

[tema_sun]

Аттрибут id у элемента должен быть уникальным на всей странице, используйте class. Чтобы удалить тот элемент, на который вы кликаете нужно использовать this.

Comments

[Zombie42679]

А можете с кодом помочь ?

И про какой id идёт речь, я понимаю, что он должен быть уникальным, а сейчас что не так?

$('#delete_me').click(function() {
div.parentNode.removeChild(div);
});

куда здесь поставить $(this) ?

[Alexandr Alexandrov]

Попробуйте так https://jsfiddle.net/yu3ver/7r2vvaks/

[Zombie42679]

Alexandr Alexandrov, Спасибо большое, получается использовали только jQuery ?

[Alexandr Alexandrov]

Zombie42679, в этом примере - да