Develop Reference

When delete something in page , refresh all values

I have a list of items. I can create some items. The problem is that when I push the delete button I want all values to refresh and change. How can I do that?
For example when I delete the third number, then the fourth tag will be third.
$(document).on("click", ".addnew", function() {
id = this.id;
var idsh = parseInt(id.substr(3));
var ids = parseInt(id.substr(3)) + 1;
document.getElementById("ad_" + idsh).style.display = "none";
kanban = document.getElementById("kanban");
var btn = document.createElement("p");
btn.id = "main_" + ids;
btn.innerHTML =
'<span type="text" id="co_' + ids + '" class="counter text-center bg-success text-white" >' + ids + ' </span>' +
'<span id="mo_' + ids + '" class="formulbitti text-center bg-success text-white" > inner </span>' +
'<button id="de_' + ids + '" class="delete text-center bg-success text-white" >delete</button> ' +
'<button type="text" id="ad_' + ids + '" class="addnew text-center bg-success text-white" >add</button>';
kanban.appendChild(btn);
});
$("body").on("click", ".delete", function() {
id = this.id;
var ids = id.substr(3);
$('#main_' + ids).remove();
});
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="kanban">
<span type="text" id="co_1" class="counter text-center bg-success text-white">1</span>
<span type="text" id="mo_1" class="formulbitti text-center bg-success text-white">inner</span>
<button type="text" id="de_1" class="delete text-center bg-success text-white">delete</button>
<button type="text" id="ad_1" class="addnew text-center bg-success text-white">add</button>
</div>

Do not use incremental id attributes. As you can see in your code they add needless complication and have absolutely no benefit.
The best method to do what you require is to use DOM traversal to relate elements to each other. The only tweak you need to make to your HTML is to add a new div to group the span and button elements. From there when a button is clicked you can use closest() to retrieve the nearest .row container and clone/remove it.
The benefit of this is that the HTML becomes standardised and the JS to work with it is the same, regardless of the content or position.
To solve the issue of the counters being updated when an action is performed, create a function which iterates through all the .counter elements and updates their text based on their index in the DOM.
Finally note that button elements have a type of button or submit, never text.
With all that said, try this:
let $kanban = $('#kanban');
let updateCounters = () => $kanban.find('.counter').text(i => i + 1);
$(document).on("click", ".addnew", e => {
$(e.target).closest('.row').clone().appendTo($kanban);
updateCounters();
});
$(document).on("click", ".delete", e => {
$(e.target).closest('.row').remove();
updateCounters();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="kanban">
<div class="row">
<span type="text" class="counter text-center bg-success text-white">1</span>
<span type="text" class="formulbitti text-center bg-success text-white">inner</span>
<button type="button" class="delete text-center bg-success text-white">delete</button>
<button type="button" class="addnew text-center bg-success text-white">add</button>
</div>
</div>
One last thing to note is that it's a litte odd to have a table-level 'add' button on each row. It would make more sense to have a single add button at the top or bottom of the content.

Change button icon with animation

I am using bootstrap icons and javascript and I would like to know how can I change the icon in an animated way?
toClipboard: function (refElementName, sender) {
let btn = $(sender);
let btnIcon = btn.find("i")
$("[name='" + refElementName + "']").select()
document.execCommand("copy")
btn.fadeOut(400)
btnIcon.attr("class", "bi bi-clipboard-check")
btn.delay(400)
btnIcon.attr("class", "bi bi-clipboard")
}
html
<div class="col position-relative">
<textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea>
<a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a>
</div>
I tried this, but it doesn't work as expected ... the animation happens but in the end the button is without icon
https://jsfiddle.net/r06s5ctn/

Is this what you're looking for?
On click, fade out icon, then set a timeout to change the icon class once it's faded out, then fade the icon back in.
function toClipboard(refElementName, sender) {
let btn = $(sender);
let btnIcon = btn.find("i")
$("[name='" + refElementName + "']").select()
document.execCommand("copy")
btn.fadeOut(400)
setTimeout(function() {
btnIcon.removeClass("bi-clipboard").addClass("bi-clipboard-check")
}, 400)
btn.fadeIn(400)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.1/font/bootstrap-icons.min.css">
<div class="col position-relative">
<textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea>
<a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a>
</div>

Alloha !
To change de icon of the button, you just need to use .html from jquery like this :
btn.fadeOut(400)
btnIcon.html("<i class="bi bi-clipboard-check"></i>")
btn.delay(400)
btnIcon.attr("<i class="bi bi-clipboard"></i>")
Have a good day!

Add dynamic element onClick and make link disable then removing it with link clickable again

I want to add an dynamic input element onClick with jQuery and make the link disable. On deleting the input element that I just added I want to make the link clickable again.
I did the first part of adding element and making the link disable but the problem is when I add multiple elements and try to delete only one element all other links become clickable. I know, because I have given class to dropdown links. Not sure what to do to get this working right.
Here is my code:
$(document).ready(function() {
$(".list").on('click', function() {
$("#blockFeild").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>'
).show();
});
});
$(document).on('click', 'a.list ', function() {
$(this).addClass('no-click');
});
$(document).on('click', 'li.block', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", "#removebtn", function() {
$(this).closest('.parent').remove();
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
<count($users_fields); $i++){ ?>
<li class="block">
<a class="list" href="#">
<?php echo $users_fields[$i]?>
</a>
</li>
<?php } ?>
</ul>
</div>

Your problem stems from duplicate ids (#removebtn, remember ids must be unique) and also this section of your code:
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
These two lines grab all elements on the page with the classes "not-allowed", and "no-click" respectively and then remove those classes. This is why the removal of one of your rows enables all your dropdown links again.
You need to create a way to associate a generated row with ONLY the link used to generate it, perhaps through the addition of an identifying class on both the row and link. That way when the row is destroyed you can use jQuery to grab that specific link element and re-activate it.

UPDATE
Now that I understand the OP better I updated this Snippet with .index() and .eq() in order to associate the correct .block .list with a matched .removebtn. Also replaced .remove() with .hide(). Works perfect.
Change all ids to classes. ex. from #removebtn to .removebtn. You can only have unique ids. When elements are generated, they have the same id, so that's why they are all affected. I don't quite fully understand OP's objective, but I bet having duplicate ids is the root of the problem.
In order to remove a .parent.row on it's own .removebtn replace the last 4 lines with these lines:
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
SNIPPET
$(document).ready(function() {
$(".list").on('click', function() {
$(".blockfield").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'<button class="btn btn-info editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>' +
'</div>'
).show();
});
});
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
.no-click {
pointer-events: none;
}
.not-allowed {
cursor: not-allowed;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="block">
<a class="list" href="#">1</a>
</li>
<li class="block">
<a class="list" href="#">2</a>
</li>
<li class="block">
<a class="list" href="#">3</a>
</li>
</ul>
</div>
<section class='blockfield'>
</section>

I faced this problem previously that my code does not work with
$(document).on.....
So firstly you change the duplication of ids as foxinatardis said and test this:
$(document).delegate('.class_off_button', 'click', function (){
//what you want to do
});

Bootstrap Popover with textarea resetting text value

I have an issue where hiding a bootstrap popover just resets the text content of my textarea within the popover. There are many of these in my page and they are created dynamically in a loop (with int i being the counter). Here is my html:
<button class="btn btn-sm" data-toggle="popover" data-container="body" data-title="FOR EVALUATOR'S ATTENTION" type="button" data-html="true" #*id="commentPopOver-#i"*# #*onclick="getAttention(#i)"*#>
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<input name="values[#i].AttentionComment" id="comment-#i" hidden />
<textarea class="form-control" onchange="updateText(#i)" id="commentText-#i" rows="3">someText</textarea>
</div>
</div>
and my JS:
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('.popoverContent').html();
}
});
})
Now I understand that it's just recreating the popover with it's default text on load, but it should at least be keeping the changes and the value of the textarea after it is closed/hidden. I wrote this JS to try and make it populate a separate hidden input to contain the value even after reset but it didn't work:
function updateText(id) {
var newtext = $('#commentText-' + id).val();
$('#comment-' + id).val(newtext);
}
Any ideas?

When you use content: function () {return $('.popoverContent').html();} the set the content of your tooltips, the tooltips content a copy of the HTML code return by $('.popoverContent').html(); The textarea is also a copy and not reference to the original textarea in your DOM.
When a tooltips opens the plugin inserts its HTML (including the copy mentioned above) in the DOM with a random unique ID. The plugin also insert a aria-describedby attribute to the elements that trigger the tooltip (the button in your case). The aria-describedby holds the same unique ID set for the tooltip.
Now you can use the 'hide.bs.popover` event. When the tooltips close you should copy the content of the textarea inside your tooltip to the (hidden) textarea in your DOM
Example
HTML:
<button type="button" id="po1" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 1</textarea>
</div>
</div>
<br>
<button type="button" id="po2" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 2</textarea>
</div>
</div>
javascript:
$("[data-toggle=popover]").each(function( index ) {
var that = $(this);
$(this).popover({
html: true,
content: function () {
return $('#' + $(this).attr('id') + ' + .popoverContent').html();
}
});
});
$('[data-toggle=popover]').on('hide.bs.popover', function () {
$('#' + $(this).attr('id') + ' + .popoverContent textarea').html( $('#' + $(this).attr('aria-describedby') + ' .popover-content textarea').val());
});
Demo: http://www.bootply.com/DvOYV12bHg

jquery append doesnt include bootstrap style after adding

I have a jquery script
$('.add-item').on('click',function(){
var URL = '{% url "main:adding_from_all_products" %}';
var $this = $(this);
var product_add_name = $this.data('item-name');
$.post(URL,{'product_add_name':product_add_name},function(response){
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +
response +
'<a href="#" data-product-id=' + product_add_name +
'class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
})
return true;
});
The element I add is a button styled with bootstrap. But after the append is done
<a href="#" data-product-id=' + product_add_name +
'class="btn btn-mini btn-success remove-product">Remove</a></span></p>
the button does not apper, it's just a link withouth any style. what should i do ?

maybe you need "" for product_add_name :
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +
response +
'<a href="#" data-product-id="' + product_add_name +
'" class="btn btn-mini btn-success remove-product">Remove</a></span></p>');

Try
$(".test").append('<p class="product-item">' +
'<span class="product-width-fix">' + response +
'<a href="#" data-product-id=' + product_add_name +
' class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
there is no space between product_add_name and the class

I just checked this with code,
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script>
$(function(){
var response="The Product Name";
var product_add_name="productName";
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +response +
'<a href="#" data-product-id=' + product_add_name +
' class="btn btn-mini btn-success remove-product"> Remove </a></span></p>');
});
</script>
</head>
<body><div class="test"></div></body>
</html>
This works fine even if you didn't use "" for "product_add_name" like data-product-id="' instead of data-product-id=' and '" class=... instead of ' class... (But if you have spaces in product_add_name, you need to use "" in order to get the expected output).
Please log and see what "product_add_name" is. This can be happen if your "product_add_name" which is returned by "$this.data('item-name')" is having any incompatible character.
If your "product_add_name" is also valid, just check whether you are adding this child element to a valid parent with style display:block applied.