Hi,
In my application I have <li>s and I am using Jquery to remove a particular <li>
The code I am using is
$(".close").click(
function() {
$(this).parent().remove()// Links with the class "close" will close parent
return false;
}
);Using this I am successfully able to remove a li but after its being removed...The <li> below it moves in place of the deleted one and is creating a white space. How can i remove that white space
Jump to PostHi,
In my application I have <li>s and I am using Jquery to remove a particular <li>
The code I am using is
$(".close").click( function() { $(this).parent().remove()// Links with the class "close" will close parent return false; } );Using this I am successfully able to remove a li …
Jump to PostWhich element has
class="close", the <li> or something within the <li>?Airshow
Jump to PostMmmmm, it's a bit diffult to interpret the ASPX.
Here's a simple test using longhand HTML/javascript, free of any ASPX/jQuery. I frequently do this sort of extract for cross-browser testing/development of awkward stuff.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Jump to PostWhich version of IE are you testing in?
Airshow
Hi,
In my application I have <li>s and I am using Jquery to remove a particular <li>
The code I am using is
$(".close").click( function() { $(this).parent().remove()// Links with the class "close" will close parent return false; } );Using this I am successfully able to remove a li but after its being removed...The <li> below it moves in place of the deleted one and is creating a white space. How can i remove that white space
try setting the visibility for the list-item to "hidden" instead of removing it if you prefer to have the element occupy the space.
Some thing to the effect
.css('visibility''hidden')
Which element has class="close" , the <li> or something within the <li>?
Airshow
Hi..
My aspx page has the code
<ul id="arrangableNodes" runat="server">
</ul>And My code behind I dynamically generate the li...
System.Web.UI.HtmlControls.HtmlGenericControl close = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
arrangableNodes.Controls.Add(close);
close.Attributes.Add("class", "notification attention png_bg");
close.Controls.Add((new LiteralControl("<a href='#' class='close'><img src='resources/images/icons/cross_grey_small.png' title='Close this notification' alt='close' /></a>")));
close.Controls.Add(li);
li.ID = strNodeName;
li.Controls.Add(dynDivDesc);And it is getting removed...but when i remove the li..
the next one moves up creating some white space...and the next li to it gets hidden beneath the first one...
This is working well in Firefox but creating all these problems in IE
Mmmmm, it's a bit diffult to interpret the ASPX.
Here's a simple test using longhand HTML/javascript, free of any ASPX/jQuery. I frequently do this sort of extract for cross-browser testing/development of awkward stuff.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>
<script>
onload = function(){
var closeLinks = document.getElementsByTagName('a');
var msg = document.getElementById('message');
for(var i=0; i<closeLinks.length; i++) {
closeLinks[i].onclick = function() {
var p = this.parentNode;
var pp = p.parentNode;
//msg.innerHTML = p.parentNode.tagName + ' : ' + p.tagName
pp.removeChild(p);
//msg.innerHTML = pp.childNodes.length;
if(pp.childNodes.length === 0) { pp.style.display = 'none'; }
};
}
};
</script>
</head>
<body>
<div id="message"> </div>
<ul style="width:100px; border:1px solid #999;">
<li><a href="#" class="close">Item 1</a></li>
<li><a href="#" class="close">Item 2</a></li>
<li><a href="#" class="close">Item 3</a></li>
<li><a href="#" class="close">Item 4</a></li>
<li><a href="#" class="close">Item 5</a></li>
</ul>
</body>
</html>Try commenting out the line if(pp.childNodes.length === 0) { pp.style.display = 'none'; } and you will see that (at least in IE6) the UL block still has some height even after the last LI has been removed. Hence hide it when its childNodes.length === 0 .
Once it's working, you can translate the code back into jQuery if you choose.
Airshow
Hi Airshow,
I have implemented the way you told me ..but i still have the same problem..no change..:sad:
Which version of IE are you testing in?
Airshow
IE8...Its working finr with IE7 And Firefox.....
Seems like an IE8 bug then.
Have you tried Dsweb's suggestion to hide rather than remove the LI?
IE8 may do that OK.
Airshow
Hi,
For my application i have to remove it...beacuse later I have to save the li's. And those Li's visible only shuld get saved.
I'm sure you can still do that with hidden LIs.
Have you tried hiding to see if IE8 renders correctly with display='none' ?
I'm off-line for the next few hours. Have a play with it.
Airshow
Tried not working./..I am sorry its actually its IE6 and IE7 not IE8 thats creating the prob...
Which element has
class="close", the <li> or something within the <li>?Airshow
You can assign a specific class to the List Item using the List Item ID
You CSS Class
.HideLI {
visibility:hidden;
}
There are a few ways to hide an element in JQuery. You can assign a specific class to the element by using the element id.
$('someID').addClass('someclassname')
or
If an element has a class attribute defined then hide only those elements. Keep in mind this will only work if the element has a class defined, so only assign a class to the ones you want to hide.
$("li[@class]").css('visibility','hidden');
Tried not working./..I am sorry its actually its IE6 and IE7 not IE8 thats creating the prob...
My test/demo above works fine in IE6 and IE7. See if it does the same running on your computer.
If it works OK, then try changing your DOCTYPE to be the same as mine (XHTML 1.0 Transitional). DOCTYPE can make a difference with this sort of thing.
Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.