Develop Reference

jQuery: change link text and icon on click

So I am trying to change the the icon of my link for collapse section alongside with the text of the link.
Here is my code:
<a href="#collapse", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>
<!--CONTENT-->
<script>
$(document).ready(function(){
$('#btn-collapse').on('click', function () {
var text=$('#btn-collapse').text();
if(text === "SECONDARY TEXT"){
$(this).text('PRIMARY TEXT');
$(this).find("i").html("expand_more");
} else{
$(this).text('SECONDARY TEXT');
$(this).find("i").html("expand_less");
}
});
});
</script>
I've been trying to find a solution for this for a while now, but nothing seems to work.. Text changes fine, but the icon completely vanishes on click. I don't think it is a major issue, but there is something I don't get with this. Any help here how to adjust?

$(document).ready(function() {
$('#btn-collapse').on('click', function() {
var thisElement = $(this);
var anchorLabelElement = thisElement.find('label');
if (anchorLabelElement.text() === "SECONDARY TEXT") {
anchorLabelElement.text('PRIMARY TEXT');
thisElement.find("i").text('expand_more');
} else {
anchorLabelElement.text('SECONDARY TEXT');
thisElement.find("i").text("expand_less");
}
});
});
<link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont#6.7.0/dist/material-design-icons.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

Edit dynamically created li elements in jquery

I want the user to be able to edit dynamically created list items that are input into a ul by the user.
I have no problem changing other items but the fact that the li items don't exist until input by the user is stumping me. I don't have any id's or classes to select to add a dblclick event to and selecting the child elements of all ul doesn't seem to work.
In short I just want to either:
click an icon on each list item that will allow me to edit the text
or
just double click the text which will allow me to edit it. (dblclick because the items are already draggable.)
I've tried a number of things but I'm not sure where to start now.
Thanks!
<div id="listWrapper" class="row">
<div id="dayInfo" class="container col-8">
<div class="card">
<img id="mondayImg" class="card-img-top">
<div class="card-body">
<h3 id="title" class="card-title">My Coding To-Do List</h3>
<div id="subTitle" class="row">
<div class="col">
<h5>Still to do</h5>
<button id="allFinished" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="stillToDo">
</ul>
<!-- <i class="fas fa-edit"></i> -->
</div>
<div class="col">
<h5>In Progress</h5>
<button id="allFinished2" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="inProgress">
</ul>
</div>
<div class="col">
<h5>Finished</h5>
<button id="removeFinished" class="btn btn-danger">Remove finished</button>
<hr>
<ul class="toBeSaved edit" id="finished">
</ul>
</div>
</div>
<div id="newItemWrapper">
<input id="newItem" placeholder="Add a new item">
<br>
<h6 id="newItemBtn" class="btn btn-primary">Add new item</h6>
<br>
<h6 id="save" class="btn btn-success">Save</h6>
<h6 id="clear" class="btn btn-warning">Clear</h6>
<p class="card-text"><small id="lastUpdated" class="text-muted toBeSaved">Last updated </small></p>
</div>
</div>
</div>
</div>
</div>
$(function() {
$("#newItem").focus();
//Adding a new items when click or enter pressed//
function addNewItem() {
let newInput = $("#newItem").val();
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
};
$("#newItemBtn").click(addNewItem);
$("#newItem").keypress(function(e) {
if (event.which == 13) {
addNewItem();
}
});
//Moving list itmes and removing list items//
$("#allFinished").click(function() {
$("#finished").append($("#stillToDo li"))
});
$("#allFinished2").click(function() {
$("#finished").append($("#inProgress li"))
});
$("#removeFinished").click(function() {
$("#finished li").remove();
});
//So you can drag items across to another list
$("#stillToDo").sortable({
connectWith: "#finished, #inProgress"
});
$("#inProgress").sortable({
connectWith: "#finished, #stillToDo"
})
$("#finished").sortable({
connectWith: "#stillToDo, #inProgress"
});
//THIS IS SAVING LIST INFO and LAST UPDATED IN THE HTML 5 LOCAL STORAGE//
$(document).ready(function() {
$("#save").click(function(e) { //Clicking the "save button"//
e.preventDefault();
var everything = [];
$(".toBeSaved").each(function() {
everything.push(this.innerHTML);
})
localStorage.setItem('list', JSON.stringify(everything));
});
//RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
function loadEverything() {
if (localStorage.getItem('list')) {
var everything = JSON.parse(localStorage.getItem('list'));
$(".toBeSaved").each(function(i) {
this.innerHTML = everything[i];
})
}
}
loadEverything(); //<--This is calling the above function, without this nothing happens//
$("#clear").click(function(e) {
e.preventDefault();
localStorage.clear();
location.reload();
});
});
});

One simple way to edit text is to replace the text with an input element with it's value set to the text as follows:
//Edit added li elements
$(document).on('dblclick', 'ul.toBeSaved.edit li', function() {
let inEdit = $('<input/>');
let toEdit = $(this);
toEdit.html( inEdit.val( toEdit.text() ) );
inEdit.focus().select();
});
$(document).on('focusout keypress', 'ul.toBeSaved.edit li input', function(e) {
if( e.which === 13 || e.type === 'focusout') {
let val = $(this).val();
$(this).closest('li').text( val );
}
});
DEMO
$(function() {
$("#newItem").focus();
//Adding a new items when click or enter pressed//
function addNewItem() {
let newInput = $("#newItem").val();
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
};
$("#newItemBtn").click(addNewItem);
$("#newItem").keypress(function(e) {
if (event.which == 13) {
addNewItem();
}
});
//End of adding a new items when click or enter pressed//
//Moving list itmes and removing list items//
$("#allFinished").click(function() {
$("#finished").append($("#stillToDo li"))
});
$("#allFinished2").click(function() {
$("#finished").append($("#inProgress li"))
});
$("#removeFinished").click(function() {
$("#finished li").remove();
});
//End of Moving list itmes and removing list items//
//So you can drag items across to another list
$("#stillToDo").sortable({
connectWith: "#finished, #inProgress"
});
$("#inProgress").sortable({
connectWith: "#finished, #stillToDo"
})
$("#finished").sortable({
connectWith: "#stillToDo, #inProgress"
});
//THIS IS SAVING LIST INFO and LAST UPDATED IN THE HTML 5 LOCAL STORAGE//
$(document).ready(function() {
$("#save").click(function(e) { //Clicking the "save button"//
e.preventDefault();
var everything = [];
$(".toBeSaved").each(function() {
everything.push(this.innerHTML);
})
localStorage.setItem('list', JSON.stringify(everything));
});
//\\END OF THIS IS SAVING LIST INFO and "UPDATED ON" IN THE BROWSER'S LOCAL STORAGE//
//RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
function loadEverything() {
if (localStorage.getItem('list')) {
var everything = JSON.parse(localStorage.getItem('list'));
$(".toBeSaved").each(function(i) {
this.innerHTML = everything[i];
})
}
}
loadEverything(); //<--This is calling the above function, without this nothing happens//
//END OF RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
$("#clear").click(function(e) {
e.preventDefault();
localStorage.clear();
location.reload();
});
});
//Edit added li elements
$(document).on('dblclick', 'ul.toBeSaved.edit li', function() {
let inEdit = $('<input/>');
let toEdit = $(this);
toEdit.html( inEdit.val( toEdit.text() ) );
inEdit.focus().select();
});
$(document).on('focusout keypress', 'ul.toBeSaved.edit li input', function(e) {
if( e.which === 13 || e.type === 'focusout') {
let val = $(this).val();
$(this).closest('li').text( val );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js" integrity="sha512-9pm50HHbDIEyz2RV/g2tn1ZbBdiTlgV7FwcQhIhvykX6qbQitydd6rF19iLmOqmJVUYq90VL2HiIUHjUMQA5fw==" crossorigin="anonymous"></script>
<div id="listWrapper" class="row">
<div id="dayInfo" class="container col-8">
<div class="card">
<img id="mondayImg" class="card-img-top">
<div class="card-body">
<h3 id="title" class="card-title">My Coding To-Do List</h3>
<div id="subTitle" class="row">
<div class="col">
<h5>Still to do</h5>
<button id="allFinished" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="stillToDo">
</ul>
<!-- <i class="fas fa-edit"></i> -->
</div>
<div class="col">
<h5>In Progress</h5>
<button id="allFinished2" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="inProgress">
</ul>
</div>
<div class="col">
<h5>Finished</h5>
<button id="removeFinished" class="btn btn-danger">Remove finished</button>
<hr>
<ul class="toBeSaved edit" id="finished">
</ul>
</div>
</div>
<div id="newItemWrapper">
<input id="newItem" placeholder="Add a new item">
<br>
<h6 id="newItemBtn" class="btn btn-primary">Add new item</h6>
<br>
<h6 id="save" class="btn btn-success">Save</h6>
<h6 id="clear" class="btn btn-warning">Clear</h6>
<p class="card-text"><small id="lastUpdated" class="text-muted toBeSaved">Last updated </small></p>
</div>
</div>
</div>
</div>
</div>

jquery hide method hides div but then div reappears

I have the following code where I want to hide the closest grouping div. When I click the delete button, the div disappears but then comes back (added 600 so I could see this).
I have researched and found others saying to use event.preventDefault, return false; and add href”#!’ to the <a> tag. None seem to work. I changed the .hide() to .remove() and It works, but I won't just want to hide the div and use it later in the post model binding
#model Durendal.Core.ViewModels.RoleViewModel
<div class="d-flex flex-row grouping">
<div class="flex-grow-1" style="overflow-x: auto;">
#(Html.Kendo().DropDownListFor(m => m.Id)
.DataTextField("Name")
.DataValueField("Id")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%;" })
.Height(290)
.Filter(FilterType.Contains)
.AutoWidth(true)
.DataSource(source =>
{
source.Custom()
.Transport(transport => transport
.Read(read => read
.Action("GetRoles", "DataApi", new { Area = "Shared" })));
})
)
</div>
<div class="">
<a href="#!" class="btn btn-sm btn-outline-danger waves-effect remove-grouping-button">
<i class="fas fa-times"></i>
</a>
</div>
<script type="text/javascript">
(function () {
$('.remove-grouping-button').click(function (event) {
event.preventDefault();
$(this).closest('.grouping').hide(600);
return false;
});
})();
</script>
</div>
This should hide the div but it reappears

Your code works - some other code must make it re-appear.
I only post this for demonstration and will delete it when you have seen it.
Please do not vote up or accept as answer and No need to vote down either
$(function() {
$('.remove-grouping-button').click(function(event) {
event.preventDefault(); // cancel anchor click
$(this).closest('.grouping').hide(600);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="d-flex flex-row grouping">
<div class="flex-grow-1" style="overflow-x: auto;">
Some Kendo dropdown
</div>
<div class="">
<a href="#!" class="btn btn-sm btn-outline-danger waves-effect remove-grouping-button">
<i class="fas fa-times"></i>
</a>
</div>
</div>

Change the onclick of a hyper link

I want to update the click event of the hyperlink onClick and want to update the html inside the hyperlink in jquery
HTML
<a class=" save" href="javascript:void(0);" onclick="save_unsave('unsave','UID','ID',this);">
<div class="jopt_iconwrap" title="Unsave" alt="Unsave" >
<span class="saved"></span>
</div>
Unsave
</a>
Now onlick of save_unsave function i want to update the html design as below:
<a class=" save" href="javascript:void(0);" onclick="save_unsave('save','UID','ID',this);">
<div class="jopt_iconwrap" title="Save" alt="Save" >
<span class=""></span>
</div>
Save
</a>
I am trying to do this in the function:
jQuery
if(type == 'save')
{
var new_type = "'unsave'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class="saved" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="saved"></span></div>Unsave</a>');
}
else if(type == 'unsave')
{
var new_type = "'save'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class=" save" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="mico"></span></div>Save</a>');
}
How can we do this in jquery.Please help me in the i have the elmenet object in the function.

simply i will suggest you to use replaceWith() in place of .html() it will work properly for you.

$('a').click(function() {
if ($(this).hasClass('save')) {
$(this).removeClass('save').addClass('unsave');
$(this).text('Unsave')
$(this).attr('id','save')
} else {
$(this).removeClass('unsave').addClass('save');
$(this).text('Save')
$(this).attr('id','unsave')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class=" save">
<div class="jopt_iconwrap" title="Save" alt="Save">
<span class=""></span>
</div>
Save
</a>
Try this way

You can replace the onclick event, like this:
$('.save')[0].onclick = function() {
save_unsave('save', 'UID', 'ID', this);
}

jQuery toggle button text and Icon

I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. Seems that the function to toggle the button text is removing my icon altogether.
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
List View
</button>
$("#toggle-list-details").click(function() {
$(this).text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};

When you do
$(this).text(function(i, text){
this reffers to <button type="button" id="toggle-list-details">, so it replaces all inner content with plain text.
To avoid this, you can do smth like this:
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
<span class="text">List View</span>
</button>
$("#toggle-list-details").click(function() {
$(this).find('span').text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};