I'm emptying a UL using jquery then I'm trying to add a new <li> after that however it's not adding the <li>
$('#pre-list').empty(); //Remove prelist
$("#pre-list ol").append('<li>' + $('#lstBox1').val() + '</li>');
Any idea why?
You are trying to select an element that does not exist (ol). You probably meant to do this:
$('#pre-list ol').empty(); //Remove prelist
$("#pre-list ol").append('<li>' + $('#lstBox1').val() + '</li>');
Related
I want to remove all <li> row but instead I removing the tag<a>.
I just try $(this).closest('li').remove() but dont work also try li.remove(). I have this:
$("#demo").append("<li class='list-group-item'>" + result.Num+ " - " + result.Desc+ "<a onclick='$(this).remove()' href='#'class='pull-right'> Delete</a> </li>");
The correct method to solve your problem is to use $(this).closest('li').remove() to traverse to the nearest parent li to the clicked a and remove it. Note that you will need to escape the quotes within the string, which is the only reason I can see why what you tried would not work.
$("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + '<a onclick="$(this).closest(\'li\').remove()" href="#" class="pull-right">Delete</a></li>');
However a much better approach is to use a delegated event handler instead of outdated on* event attributes, like this:
var $demo = $("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + 'Delete</li>');
$demo.on('click', '.list-group-item a', function(e) {
e.preventDefault();
$(this).closest('li').remove();
});
how would I add a link to each list item?
basically I have a list and i want to use js or jquery to added in href for my search page.
<aside class="listlinks">
<ul>
<li>CRM</li>
<li>CTI</li>
<li>Call Center</li>
<li>Data warehouse</li>
<li>Documentum D2</li>
<li>MDM</li>
<li>SharePoint</li>
</ul>
</aside>
$('.listlinks').each(function(){
$(this).wrapInner('<a href="\search.php?' + $(this).html() + '" />');
});
Your example would work as long as you updated the jQuery selector to match the list items instead of the parent list, e.g. replace .listlinks with .listlinks ul li. You should also make sure you properly encode the text in the href portion with encodeURI or encodeURIComponent.
You don't really need jQuery for this and using pure Javascript and manually concatenating would save you 3-4 function calls per list item.
$('.listlinks ul li').each(function(){
this.innerHTML = '' + this.innerHTML + '';
});
You can shorten this even more by sacrificing one function call per list item and using String.prototype.link. The link method automatically wraps string objects with a hyperlink to the supplied URL.
$('.listlinks ul li').each(function(){
this.innerHTML = this.innerHTML.link('\search.php?' + encodeURIComponent(this.innerHTML));
});
$('.listlinks ul li').each(function(){
$(this).append('<a href="\search.php?' + $(this).html() + '" />');
});
You could do
$('.listlinks ul li').each(function(){
var text = $(this).html();
$(this).html('' + text + '');
});
Update:
Make sure to encode the text in the url. Just remembered that
# Rayen Kamta try this:
$.each($('.listlinks li'),function(k,v){
$(v).wrap('<a href="\search.php?' + $(v).html() + '" />');
});
HTML string:
var ul = document.getElementById("list");
$("#list").append(
"<li class='margbottom'>" +
"<label id='id_'><img src='images/icon-approved1.png' class='imgspace' align='absmiddle'/><span id='categoriesName'>" + categoryName + "</span>: <span id='categoriesValue'>" + value + "</span></label>" +
"<div class='menuicon'>" +
"<ul>" +
"<li><a href='#url' onclick='removeCategory();'><img src='images/icon_minus.png'></a></li>" +
"<li><a href='#url'><img src='images/icon-searchby-s.png'></a></li>" +
"</ul>" +
"</div>" +
"</li>"
);
JS:
function removeCategory(){
alert("Inside removeCategory");
var elem = document.getElementById('list');
elem.parentNode.removeChild(elem);
}
I have created dynamically li list and I need to remove it dynamically. bt by calling removeCategory it is removing all element instead of particular one.
Anyone can help?
Thanks in Advance.
In this specific situation, you should pass this to the removeCategory function and use it as the element.
So, basically -
<a href='#url' onclick='removeCategory();'
Should be -
<a href='#url' onclick='removeCategory(this);'
And the function should be -
function removeCategory(elem){
alert("Inside removeCategory");
elem.parentNode.removeChild(elem);
}
However, adding HTML within the JavaScript like this is discouraged. If you must, at least do not use inline event listeners, but add them using jQuery instead ($("#list a").on("click", removeCategory); and then just use this within the updated function instead of elem).
Also, your code was indeed removing the entire list, because you are always removing the parent element of the element that has the list ID.
In jQuery you can do like this:
Add class 'removeLink' to your tag. No need for onClick() action.
jQuery code to remove:
$('removeLink').click(function(){
var iconDiv = $(this).closest('.menuicon');
var li = iconDiv.closest('<li>');
li.remove();
});
$("ul").find("[particular li selector]").remove();
The above is just a starting point. It all depends on how easy access you have to the particular li in question. You can either access it directly (by id) or via the parent in some way.
If possible do this
$("#particularLI").remove();
I want to add progressive id to a series of elements on an unordered HTML list. I used the jQuery .each() method to get each <li> of the List and append a <span> inside each <li>. Then I added the ID attribute with index of each() as number.
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(".arr").attr("id", "id_" + i);
});
Fiddle Demo
But I get id_3 for all elements. Why? What did I do wrong?
Thanks for any help!
It is because you are applying it to .arr globally, so overriding it every time.
You need to be more specific with adding it, by finding the .arr in you current li.
Change your code to be:
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(this).find(".arr").attr("id", "id_" + i);
});
As has been pointed out, $(".arr") targets every element with the arr class, so on the fourth iteration you update all such elements to the id_3 id.
You can limit the selection with $(".arr", this) or $(this).find(".arr"), but it would be easier to just turn the append around:
$('#menu li ul li').each(function(i, e){
$('<span class="arr"></span>')
.attr("id", "id_" + i)
.appendTo(this);
});
That is, create the element first, set its id, then use .appendTo() instead of .append().
Or rather than calling .attr() you can pass the desired attributes directly to the $() function when you create your span:
$('#menu li ul li').each(function(i, e){
$('<span></span>', {
"class": "arr",
"id": "id_" + i
}).appendTo(this);
});
You are targeting a class when assigning the attribute. Every element you create is created with the same class so all items get assigned the same attribute. This code saves the newly created element to a variable called elem and then sets the attribute ID of that newly created element.
var elem = $(this).append('<span class="arr"></span>');
elem.attr("id", "id_" + i);
You need to scope your $(".arr").attr("id", "id_" + i); selector. Its currently pulling all the <span> tags each time. I'm guessing you have 4 total at this point, which is why they are all getting set to "id_3".
Added in $(this) to your selector.
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(".arr", this).attr("id", "id_" + i);
});
Modified Fiddle: http://jsfiddle.net/NZgyD/2/
you can do it this way
$('#menu li ul li').each(function(i, e){
$(this).append('<span id="id_' + i + '" class="arr"></span>');
});
because $(".arr") is selector for multiple items
At the moment I'm building a list using the following code:
$('<li id="li' + jJob.Id + '"><div style="width: 98%; background-color: #9E7BFF; colour: #000000">' + jJob.Type + ' ' + jJob.AddressClean + ' (' + jJob.Status + ')' + '</div></li>').click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); }).bind("contextmenu", function(e) { alert('li' + jJob.Id); return false; }).appendTo('#assignmentList');
This works as previously required. However I need to be able to add another a link which will show another menu allowing various options. The problem is that I've attached the click event to the div. How can I attach it only to the a link?
Create li
Create div
Create a link with click event
Create another a link click event
Append li to #assignmentList
Mark
You want to append your onclick event to your <a> link inside the li correct?
One option would be to remove the
.click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); })
And instead place this in your link, e.g.
' stuff '
Where NewClickEvent is defined as
function NewClickEvent(jobID)
{
ShowStatus('job ' + jobID + ' is available');
UnassignJob(jobID); $(this).remove();
}
Note- you may have to fiddle this a bit to get $(this) to work as it did previously... not sure what object it will bring back currently.
You could use either the href attribute as shown, or add an onclick attribute to the link.
Hopefully this should give you at least some inspiration :)