Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 8333

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Mar 31st, 2010

To remove li using JQuery

Expand Post »

Hi,

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

The code I am using is

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(".close").click(
		function() {
			$(this).parent().remove()// Links with the class "close" will close parent
 
 
					return false;
			}
		);
$(".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

Similar Threads

IE6/IE7 bug in jQuery/CSS in JavaScript / DHTML / AJAX
Check box doesn't hold it's value ! in PHP
Form - JQuery and highlighting in JavaScript / DHTML / AJAX
jquery dynamic select box + clone row in JavaScript / DHTML / AJAX
jquery/post in JavaScript / DHTML / AJAX

sniigg

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

31 posts
since Mar 2010

Permalink

Mar 31st, 2010

Use CSS display:hidden instead of removing list item

Click to Expand / Collapse Quote originally posted by sniigg ...

Hi,

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

The code I am using is
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(".close").click(
		function() {
			$(this).parent().remove()// Links with the class "close" will close parent
 
 
					return false;
			}
		);
$(".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')

dsweb1017

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

15 posts
since Jul 2009

Permalink

Mar 31st, 2010

Re: To remove li using JQuery

Which element has class="close" , the <li> or something within the <li>?

Airshow

Airshow

Sponsor

Reputation Points: 299

Solved Threads: 354

WiFi Lounge Lizard

Offline

2,504 posts
since Apr 2009

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

Hi..

My aspx page has the code

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<ul id="arrangableNodes" runat="server">
	</ul>

And My code behind I dynamically generate the li...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 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);
 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

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

31 posts
since Mar 2010

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

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

sniigg

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

31 posts
since Mar 2010

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
<!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

Sponsor

Reputation Points: 299

Solved Threads: 354

WiFi Lounge Lizard

Offline

2,504 posts
since Apr 2009

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

Hi Airshow,

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

sniigg

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

31 posts
since Mar 2010

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

Which version of IE are you testing in?

Airshow

Airshow

Sponsor

Reputation Points: 299

Solved Threads: 354

WiFi Lounge Lizard

Offline

2,504 posts
since Apr 2009

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

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

Last edited by sniigg; Apr 1st, 2010 at 8:21 am.

sniigg

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

31 posts
since Mar 2010

Permalink

Apr 1st, 2010

Re: To remove li using JQuery

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

Sponsor

Reputation Points: 299

Solved Threads: 354

WiFi Lounge Lizard

Offline

2,504 posts
since Apr 2009

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: adding web reference in .aspx.cs file

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: IE6/IE7 bug in jQuery/CSS

DaniWeb Message

Cancel Changes

User Name
Password