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();
Related
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() + '" />');
});
Using JavaScript and JQuery and underscore
Currently I have the following
<div id="select"></div>
which is populated by the following code
$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function (e) {
$(this).width(100).height(100).appendTo('#select');
So at the moment only the img is taken and placed inside #select, but I would also like for it to include item.A item.C and item.C
But I'm not sure how to change the $(document).ready(function () { code block to achieve this?
I thought I might need to give the div an id and reference that?
I've been able to take the whole lot by concatenating the code block, but thats not how I want it to work, I'd like each element seperate so that I can target it with CSS.
_.each(Badges, function (item) {
var wrapper = $('<div class="wrapper"></div>');
wrapper.append('<img class="images BadgeImgOutline responsive-image" src="' + item.imageURL + '" />');
wrapper.append('<div>' + item.A + '</div>');
wrapper.append('<div>' + item.B + '</div>');
wrapper.append('<div>' + item.C + '</div>');
$('#container').append(wrapper);
});
You could use jQuerys ".parent()" method to get the parent of the img tag - in this case your wrapper div and add this to your select.
The code could look like so:
$(this).width(100).height(100);
$(this).parent().appendTo('#select');
for shrinking the image and appending the whole wrapper including img and items to your select.
Hope this helps
I am very close to solving this problem but I can't seem to grab the outer html from my <li>.
I am adding my <li>'s to a <ul> like this
function addTab() {
tabs.append('<li class="navHighlight">'
+ '<a href="#">'
+ title
+ '</a>'
+ '<a href="#">'
+ '<img src="images/delete.png" class="deleteImage"/>'
+ '</a>'
+ '</li>');
};
Then I'm trying to delete them with this
$("body").on("click", ".deleteImage", function (e) {
var removeItem = $(this).closest('li').html(); // problem
console.log(removeItem);
listItems = jQuery.grep(listItems, function (value) {
console.log(value);
return value != removeItem;
});
});
But the problem is, my remove item variable has this value
Test<img src="images/delete.png" class="deleteImage" style="display: inline;">
and I need it to have the outer html value as well, like this
<li>Test<img src="images/delete.png" class="deleteImage"/></li>
the class value I initially assign to the <li> called "navHighlight" will of been removed by this time because it's only there for aesthetic purposes. It is toggled when another <li> item is clicked, so that point of reference is out the window. I've tried a lot of different things, but I can't seem to grab the outer html <li> tag.
Any help is appreciated.
You can use outerHTML to get the outside wrapper li as well:
var removeItem = $(this).closest('li')[0].outerHTML;
The Html that I'm getting ideally looks like this:
<span class="RapidLink1-H">See the more detailed areas of what not</span>
Next my aim is to change the span tag into an anchor tag. With the ideal Html, I have done it this way:
// Walk through each link tag on this page and replace the content with an actual link
thisLink.each(function() {
linkRefTarget = '';
// Get only the identifier number of the link
linkId = ($(this).attr('class')).replace(/[A-Za-z$-]/g, '');
// Match this link with the list of link references
if (thisLinkRef) {
for (var key in thisLinkRef) {
if (key == 'link' + linkId) linkRefTarget = thisLinkRef[key];
}
}
output = '';
output+= '<a href="#' + linkRefTarget + '" id="link' + linkId + '" class="rapidLink">';
output+= $(this).html();
output+= '</a>';
}).replaceWith(output);
Now, the problem comes when I'm actually getting this sort of Html (please note, I can't change the Html input):
<span class="RapidLink1-H">See the</span><span class="RapidLink1-H">more detailed areas of</span><span class="RapidLink1-H">what not</span></span>
The question is:
How could I get it to work with such a broken set of spans?
I'm thinking the following:
Find an expected link span
Check whether the immediate next element is also a span with the same class
and then check whether the immediate next element is also...,
and then check...
if none is found, combine the innerHtml of each span into a single anchor tag
How could I achieve such a loop?
Thanks.
There is the + selector which selects consecutive elements: http://jsfiddle.net/NWWYC/1/.
$(".RapidLink1-H + .RapidLink1-H").each(function() {
// move contents to previous span, remove this span afterwards
$(this).prev(".RapidLink1-H").append(
$(this).contents()
).end().remove();
});
I am using Jquery to dynamically populate the table element. My table will have three columns - Label, textarea and a button. I am binding a click event on click of the button. Below is my Jquery code.
var rowElem = $('<tr id="'+ key + '" class="queryRow"> </tr>');
rowElem.append($('<td class="queryTitleCol">' + key + '</td>'));
var colElem = $('<td class="queryValueCol"></td>');
var textAreaElem = $('<textarea rows="10" cols="75"/>');
colElem.append(textAreaElem);
rowElem.append(colElem);
textAreaElem.val(value);
var btnCol = $(
'<td valign="top">'
+ '<button style="width:42px; vertical-align:middle; margin:2px;" title="delete">'
+ '<span class="ui-icon ui-icon-trash" style="float:left;"/>'
+ '</button>'
+'</td>');
rowElem.append(btnCol);
$("button", btnCol).click(action);
}
In the button event I am using Jqury.closest to get the TR tag and label element. Below is my code for button click.
function action() {
var rowElem = $(this).closest("tr");
var labelTD = $(".queryTitleCol", rowElem);
}
But labelTD , I am always getting as [td.queryTitleCol] as an array. I am not able to get the td element to get the lable element. I tried with find(), but still I am getting as td array.
rowElem.find('td.queryTitleCol');
How can I traverse and get the label name on click function of the button. Any help will be really appreciated.
Try
var label = $(".queryTitleCol", rowElem)[0].innerHTML;
or
var label = $(".queryTitleCol", rowElem).text();
You could try something like
$('button').click(function(){
$(this).prev('.queryTitleCol').text();
});
This will always grab the previous element with queryTitleCol as its class. It only returns one element, so you shouldn't run into the problem you've been describing.
You can try this
function action() {
var titleCol = $(this).parent().parent().find('td:eq(0)').text();
}
Check this FIDDLE