I have a kind of todolist, in which I add elements when clicking on the ‘add’ button. There are two default lines. The add function works great, here’s the code
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(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 = $("<div>", {
class: "flex-row"
}).insertBefore(this);
$("<label>").appendTo(row);
$("<input>", {
type: "text",
class: "input",
placeholder: "custom text " + count,
tabindex: count
}).appendTo($("label", row));
$("<button>", {
class: "remove"
}).html("-").appendTo(row);
$("<span>", {
class: "output"
}).insertAfter($("#custom_wrapper .output:last"));
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<article>
<section>
<div class="flex-row">
<label><input class="input" type="text" name="" placeholder="custom text" tabindex="1" /></label><button class="remove">-</button>
</div>
<div class="flex-row">
<label><input class="input" type="text" name="" placeholder="custom text 2" tabindex="2"></label><button class="remove">-</button>
</div>
<button class="add">+</button>
<div class="flex-row">
<div>customText{{[<span id="custom_wrapper"><span class="output"></span><span class="output"></span></span>]}}</div>
</div>
</section>
</article>
</div>
</div>
</body>
Now, I’ve added a button to delete the lines. This is where it gets stuck.
For example: I add two rows to have 4 in total. For example, each line has one letter on it. (a,b,c,d) I delete “b,c,d” and I leave “a”; When I add more, the added text will be inserted before the “a” when it should come after. If I keep adding more, a text will replace an existing text, instead of being added.
Moreover I would like that in my span.output, there is never a pipe before the first text.
Does anyone have any idea where the problem comes from?
Here is my code:
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(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 = $("<div>", {
class: "flex-row"
}).insertBefore(this);
$("<label>").appendTo(row);
$("<input>", {
type: "text",
class: "input",
id:"custom-text-" + count,
placeholder: "custom text " + count,
tabindex: count
}).appendTo($("label", row));
$("<button>", {
class: "remove"
}).html("-").appendTo(row);
$("<span>", {
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();
})
})
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<article>
<section>
<div class="flex-row">
<label><input class="input" type="text" name="" id="custom-text-1" placeholder="custom text" tabindex="1" /></label><button class="remove">-</button>
</div>
<div class="flex-row">
<label><input class="input" type="text" name="" id="custom-text-2" placeholder="custom text 2" tabindex="2"></label><button class="remove">-</button>
</div>
<button class="add">+</button>
<div class="flex-row">
<div class="token">{{customText[<span id="custom_wrapper"><span class="output" dataid="custom-text-1"></span><span class="output" dataid="custom-text-2"></span></span>]}}</div>
</div>
</section>
</article>
</div>
</div>
</body>