Removing li elements from ul - javascript

Is it possible using JavaScript to dynamically remove just a few li elements from a ul, given the id's of the li elements?
UPDATE about the actual issue:
I've the following list.
<ul id="attributes" data-role="listview">
<li id="attrib01">Attribute1</li>
<li id="attrib02">Attribute2</li>
<li id="attrib03">Attribute3</li>
<li id="attrib04">Attribute4</li>
<li id="attrib05">Attribute5</li>
</ul>
After a ajax request/response, if a particular attribute is "undefined", I want to remove it from the list.
if(typeof data.attrib1 === "undefined")
$("#attrib01").remove();
I've made sure I'm receiving the correct ajax response. So, the problem now is, that when I remove attrib4, attrib[1-3] are being removed as well. Any idea why this might be happening?

Try
var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);

If you get the element then find its parent then remove the element. from the parent as follows:
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
It is necessary to go through the parent so this is unavoidable.

$('#id').remove() is the correct way to remove a single element. Note that element IDs must be unique in html, and that invocation must be wrapped in a DOM ready function.
This is a working example based on your html. It loops through all the list-items and removes the one whose id is not present in the data object:
var data = {
attrib01: "Number 1",
attrib02: "Number 2",
attrib04: "Number 4"
};
$(document).ready(function() {
$("ul > li").each(function() {
alert(this.id in data); //check if value is defined
if(!(this.id in data)) {
$(this).remove();
// This also works:
//$('#'+this.id).remove();
}
});
});​
It is also possible to target and remove only a single element (Demo) by simply doing:
$(document).ready(function() {
$("#attrib04").remove();
});​
Be careful with your IDs -- they must match exactly. attrib04 != attrib4

This will make the li elements invisible:
document.getElementById("id_here").style.visibility = "hidden";
Disclaimer: they will still be in the DOM
To remove elements from the DOM use JQuery's .remove() method:
$("#id_here").remove();
http://api.jquery.com/remove/

Related

How can I change an attribute value for all list items?

I have a simple structure like:
HTML
<ul id="costsDropdown">
<li data-position="bla bla"></li>
</ul>
and I want to change each "data-position" attribute of my list Elements.
My first Jquery Shot was this here:
$("#costsDropdown ul").each(function() {
$("li").attr("data-position", "TEST-VALUE123");
});
but it doesnt work, I think my selector are wrong...
could anyone give me a hint please?
Thanks for any help!
Greetz
Your selectors are a bit off
$("#costsDropdown ul").each
That is trying to select the child ul of the container #costsDropdown (which is the ID of the ul) - what you want is:
$("#costsDropdown li").each(function() {
$(this).attr("data-position", "TEST-VALUE123");
});
ID's are unique - no need to double up the selector with an ID and the type of element it is.
Note that I used $(this), not $("li"), inside the each callback. $("li") selects all li elements, anywhere on the page; we just want a jQuery wrapper for the one specific one we're handling inside the each.
In fact, the each is completely unnecessary because of the set-based nature of jQuery; if you use the .attr setter, it sets the attribute on all elements in the set:
$("#costsDropdown li").attr("data-position", "TEST-VALUE123");
That will set the value on all of the li elements inside #costsDropdown.
If you need to set separate individual values on the individual li elements, you still don't need each (though it's fine if you want to use it); you can use the version of attr that accepts a callback that it uses to find out what value to set:
$("#costsDropdown li").attr("data-position", function(index) {
return "Test value " + index;
});
That will set "Test value 0" on the first li, "Test value 1" on the second, etc. And like the each example above, if you need to, you can use this within the callback to refer to the li for that call (possibly using $(this) to wrap it if you need a jQuery wrapper).
$("#costsDropdown ul") matches no elements, it has to be $("#costsDropdown") (#costsDropdown is the ul).
And even that is unnecessary. Go
$("li[data-position]").attr("data-position", "TEST-VALUE123");
instead.

Check if list element is visible (jquery.visible)

I'm trying to check if each element of an ul list is visible using the jquery.visible plugin. The problem is that the script does not handle each "li" element as independent, so putting this:
var element = $("ul li");
if (element.visible(true)) {
element.removeClass("hidden");
}
Removes the "hidden" class of all elements at the same time.
Any ideas?
You are initializing element as an array, so the name is misleading, and it may be throwing you off later in the code.
You want something like this (untested):
var arrElements = $("ul li");
arrElements.each(function() {
if ($(this).visible(true)) {
$(this).removeClass("hidden");
}
});
Note that I am using the each method and $(this) to act on only one li element at a time.
How about checking just the css property:
if(element.css('display') != 'none')

Is it possible to get all elements which have a specific value into any type of attribute?

I want to get all elements in an HTML Dom, which have any attribute with the a specific value.
For Example -
<ul style="width:150px;" id="RadioButton1">
<li style="width:150px;"><input type="radio" name="RadioButton1"><label>Option 1</label></li>
<li style="width:150px;"><input type="radio" name="RadioButton1"><label>Option 2</label></li>
<li style="width:150px;"><input type="radio" name="RadioButton1"><label>Option 3</label> </li>
</ul>
I want to get all elements which contains "RadioButton1" in any attribute. Means i want to select UL and all three RadioButtons.
Note: Above HTML i used UL-LI structure, but the real scenario it's too much different. So please don't give answer in completely favor of UL-LI. I want global solution.
There are any selector exist to select all type of attribute?
Is it possible to select elements with in this approach?
Bunch of Thanks in advance...!!!
It can be done by filtering each element and checking its attributes:
Fiddle
var elements = $('*').filter(function () {
return $(this.attributes).filter(function(){
return this.nodeValue == 'RadioButton1';
}).length;
});
Try this:
$("*").each(function() { //check all elements inside DOM
var elem = $(this);
$.each(this.attributes, function() {
if(this.value=='RadioButton1'){
console.log(elem); //your code goes here. elem is nothing but element
//with value RadioButton1 in any attribute
}
});
});
NOTE: check console for elements.
DEMO
The attributes property contains them all:
$(this).each(function() {
$.each(this.attributes, function() {
// this.attributes is not a plain object, but an array
// of attribute nodes, which contain both the name and value
if(this.specified) {
if(this.value == 'RadioButton1')
{
alert(this.name);
}
}
});
});
$("input[name='RadioButton1'],ul[id='RadioButton1']")
$('[name="RadioButton1"]') will select all items that have "RadioButton1" as their name attribute.
$('[id="RadioButton1"]') will select all items that have "RadioButton1" as their id attribute. Keep in mind that in case of ID attributes, there should only be one item with any given ID.
$('[name="RadioButton1"],[id="RadioButton1"]') will give you the combined list.
Keep in mind that an item that has both the ID and Name attribute set to "RadioButton1" will be added twice.
If there is a third attribute on which you want to search, just add that one to the comma-separated list of selectors.
To achieve this you should play with data-types="RadioButton"
And then using
$('input[data-types=RadioButton]')

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

Finding closest previous li

I'm currently trying to select the previous closest list element within an <ul>
My current method works if there is > 1 <li> inside of it.
html:
<ul id="coaches" class="list">
<li><span>bob<a class="close"></a></span></li>
<li class="colored"><span>cobb<a class="close"></a></span></li>
</ul>
js:
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
});
How can I make it delete the previous closest list element with both the number of list element = 1 and > 1 elements? I tried adding a prev() and prevAll() chained after closest('li') but to no avail. Any ideas?
It should work as you have it in your example..
demo at http://jsfiddle.net/gaby/nZXxD/ for the code as it currently is
demo at http://jsfiddle.net/gaby/nZXxD/1/ for the code with a single li element..
The problem must lie somewhere else..
(are you sure the event is bound correctly? and after the DOM is ready ?)
$(function(){
$('a.close').click(function(){
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
});
});
});
it just working fine with prev()
check the link http://jsfiddle.net/ABqpN/5/
Assuming $(this) is referring to the "a" tags inside "span" inside "li", and assuming that when you click on the "a" it's parent "li" should get removed, you can do this:
$(this).parent('li').fadeOut("normal", function() {
$(this).remove();
});

Categories

Resources