To remove li using JQuery

Hi,

In my application I have s and I am using Jquery to remove a particular

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 below it moves in place of the deleted one and is creating a white space. How can i remove that white space

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Hi,

In my application I have s and I am using Jquery to remove a particular

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 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')

dsweb1017

Newbie Poster

15 posts since Jul 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

0

Which element has class="close" , the or something within the ?Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

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...

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

This is working well in Firefox but creating all these problems in IE

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

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">&nbsp;</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

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

Hi Airshow,

I have implemented the way you told me ..but i still have the same problem..no change..:sad:

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Which version of IE are you testing in?

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

IE8...Its working finr with IE7 And Firefox.....

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

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

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

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.

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

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

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

Tried not working./..I am sorry its actually its IE6 and IE7 not IE8 thats creating the prob...

sniigg

Light Poster

31 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Which element has class="close" , the or something within the ?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');

.

dsweb1017

Newbie Poster

15 posts since Jul 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

0

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

Airshow

WiFi Lounge Lizard

Moderator

2,679 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

To remove li using JQuery

This article has been dead for over three months