Todolist: удалить динамически добавленные элементы div ⇐ Jquery

[Anonymous]

У меня есть своего рода список задач, в который я добавляю элементы при нажатии на кнопку «Добавить». Есть две строки по умолчанию. Функция добавления работает отлично, вот исходный код

Код: Выделить всё

$(function() {
$(".container").on('input', 'input[type=text]', function(event) {
var i = $(this).closest(".flex-row").index();
var v = (i == 0) ? $(this).val() : "|" + $(this).val();
$("#custom_wrapper .output").eq(i).html(v);
});

$('.add').click(function() {
var count = $("input").length;
count++;
var row = $("", {
class: "flex-row"
}).insertBefore(this);
$("").appendTo(row);
$("", {
type: "text",
class: "input",
placeholder: "custom text " + count,
tabindex: count
}).appendTo($("label", row));
$("", {
class: "remove"
}).html("-").appendTo(row);
$("", {
class: "output"
}).insertAfter($("#custom_wrapper .output:last"));
});
});

Код: Выделить всё

-

-

+

customText{{[]}}

Теперь я добавил кнопку для удаления строк. Здесь он застревает.
Например: я добавляю две строки, чтобы всего было 4. Например, в каждой строке есть одна буква. (a,b,c,d) Я удаляю «b,c,d» и оставляю «a»; Когда я добавляю больше, добавленный текст будет вставлен перед буквой «а», хотя он должен идти после. Если я продолжу добавлять больше, текст заменит существующий текст, а не будет добавлен.
Более того, мне бы хотелось, чтобы в моем span.output никогда не было канала перед первым текстом. .
Кто-нибудь знает, откуда возникла проблема?
Вот мой обновленный код:

Код: Выделить всё

$(function() {
$(".container").on('input', 'input[type=text]', function(event) {
var i = $(this).closest(".flex-row").index();
var v = (i == 0) ? $(this).val() : "|" + $(this).val();
$("#custom_wrapper .output").eq(i).html(v);
});

$('.add').click(function() {
var count = $("input").length;
count++;
var row = $("", {
class: "flex-row"
}).insertBefore(this);
$("").appendTo(row);
$("", {
type: "text",
class: "input",
id: "custom-text-" + count,
placeholder: "custom text " + count,
tabindex: count
}).appendTo($("label", row));
$("", {
class: "remove"
}).html("-").appendTo(row);
$("", {
class: "output",
dataid: "custom-text-" + count
}).insertAfter($("#custom_wrapper .output:last"));
});

$('body').on('click', '.remove', function() {
$(this).parent('.flex-row').remove();
var j = $(this).parent().find('.input').attr("id");
$('#custom_wrapper .output[dataid="' + j + '"').empty();
})

})

Код: Выделить всё

-

-

+

{{customText[]}}

Подробнее здесь: https://stackoverflow.com/questions/790 ... added-divs