CODEWITHSUNDEEP
javascriptjqueryhtml
emilly
emilly

Reputation: 10530

Issue with jquery remove method on IE7?

<table class="myCustomers">
 <tbody>
   <tr>
     <td>
       <ul id="salesCustomers">
       <li title="cust 1"><a id="cust_1" >customer 1</a></li>
       <li title="cust 2"></li>
       </ul>
     </td>
   </tr>
 </tbody>

when i do on below on IE 7, DOM element corresponding to "customer 1" gets removed from container "salesCustomers" but "salesCustomers" container does get adjusted(i mean IE 7 displays empty space in place of it) after removal of element

  $('#cust_1').remove();

It works fine on IE8,9,firefox,chrome but not on IE 7?

Updated:-

CSS part is

table.myCustomers li {
    margin: 8px;
}

table.myCustomers li a {
    text-decoration: none;
}

a {
    color: #000000;
    margin: 3px;
}

Upvotes: 0

Views: 64

Answers (2)

painotpi
painotpi

Reputation: 6996

The empty space may be since the li is still there. (as pointed out by Jayraj)

If you want to remove the li corresponding to the #cust_1 as well,

You have a couple of ways to do it,

  1. $("[title='cust 1']").remove();
  2. $("#cust_1").parents("li").remove(); //this will remove the child element as well

Test link

Upvotes: 0

Jay
Jay

Reputation: 3531

This code

  $('#cust_1').remove();

will only remove the tag <a id='cust1'>customer1</a> tag. Its surrounding <li> tag is still in the DOM. If your CSS has assigned some height to <li> elements, it will still appear as an empty space.

Upvotes: 2

Related Questions