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();
});
Related
I have the code below:
$('a').on('click', function () {
$('#show').html($(this).attr('data-owner') + '<br><img src="' + $(this).attr('data-owner_logo') + '"/><br>' + '<br>' + $(this).attr('data-owner_url'));
I have amended it so that data-owner_logo returns an image in the html div, but how can I amend the code so that the data-owner_url returns a clickable link as specified text (e.g. 'More info') instead of the full url? Any help appreciated, I have tried everything!
Thanks
Maybe html() is not the best function to call here but if you must:
$('a').on('click', function () {
$('#show').html(... + '<a href="' + $(this).attr('data-owner_url')
+ '">More info</a>'
);
I prefer to use append(), it's more readable (but slower):
$('#show')
.empty() // clear node
.append(document.createTextNode($(this).attr('data-owner')))
.append($('<br />'))
.append($('<img />').attr('src', $(this).attr('data-owner_logo')))
.append($('<br />'))
.append($('<a />').attr('href', $(this).attr('data-owner_url')).text('More info'))
;
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 have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
however this is not working for me. does anyone have any ideas how to achieve this? someonehow i need to use the passed parameter 'e' to change the height
boxOPToneplustwo : this is an a tag as well.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(e.target).next('p').addClass("popupHighlight");
});
element creation:
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPToneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
anchorElement += '</a>';
with jQuery you can use this to refer to the handled element.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(this).next('p').addClass("popupHighlight");
});
http://api.jquery.com/mouseover/
Console play
e.g: trying putting the following code in the console (F12) and see what it does to SO :P
$("p, span").mouseover(function(){ $(this).css("display", "none"); } );
I have list of li which have some hidden li also. I am applying css class by using this method
function ArrangeAlternateRows() {
$('#' + firstContainer + ' li, #' + secondContainer + ' li').removeClass('AltRow');
$('#' + firstContainer + ' li:visible:odd').addClass('AltRow');
$('#' + secondContainer + ' li:visible:odd').addClass('AltRow');
$('#' + secondContainer + ' li input[type="text"]').css("width", "100%");
}
it works great but in IE-7 ":visible" is not working so i tried to use "not(:hidden)" that also not working.
Is there any alternate to apply css class on li without using ":visible" ?
You can still use a loop to directly assign a class to li.
If you do that you preserve also the compatibility with other browsers (like IE7)
Check : http://jsfiddle.net/b4zhs/2/
.invisibleItem
{
display:none;
}
while making an li visible/invisible add/remove a class, say visible-li
$('#' + firstContainer + ' li').show().toggleClass("visible-li");
$('#' + firstContainer + ' li').hide().toggleClass("visible-li");
So
$('#' + firstContainer + ' li.visible-li') // gives visible li elements inside firstContainer
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 :)