Deleting Div using jQuery

Question

Here is my Code

<div class="k-top">  
  <span class="k-in">Module = UserManagement</span>
</div>

<ul class="k-group">
   <li class="k-item">
     <div class="k-top">
         <span class="k-in">Forms = Manage Users</span>
     </div>
         <ul class="k-group" >
             <li id="treeview_tv_active">
                <div class="k-top">
                       <span class="k-state-selected k-in">Tasks = Modify</span>
                </div>

               <ul class="k-group">
                     <li class="k-item" >
                         <div class="k-top">   //I want to delete This DIV
                           <span class="k-in">Roles = User, Admin, Approver</span>
                        </div>
                    </li>
                    <li class="k-item k-last" >
                        <div class="k-bot">
                           <span class="k-in">Roles = User,Admin,</span>
                         </div>
                   </li>
              </ul>
         </li>      

I have tried the following jQuery

$('.k-in').closest('.k-top').remove();

to delete follwing div

<div class="k-top">   
     <span class="k-in">Roles = User, Admin, Approver</span>
 </div>

but this is deleting all the divs with class ="k-top"

How can i delete the particular div from the above code

Please help me to solve this

Answer 1

That's because you have multiple dividers with the class "k-in". The selector you're using pulls all 5 of the "k-in" class elements then finds the closest element with a class of "k-top" (in each case this is their parent apart from the very last one), then removes them all.

If you want to specifically remove only one of those dividers you can give it a unique identifier and select on that:

<ul class="k-group" >
         <li id="treeview_tv_active">
            <div class="k-top">
                   <span class="k-state-selected k-in" id="k-in-3">Tasks = Modify</span>
            </div>

    <ul class="k-group">
         <li class="k-item" >
            <div class="k-top">   //I want to delete This DIV
                   <span class="k-in" id="k-in-4">Roles = User, Admin, Approver</span>
             </div>
         </li>
         ...

Calling:

$('#k-in-4').closest('.k-top').remove();

Answer 2

Try this:

$('li ul.k-group .k-item:first-child').remove();

Working Demo

EDIT:

Try this one :

$('.k-group .k-item .k-group .k-group .k-item:first-child .k-top').remove();

Updated Demo

Answer 3

Better is to give an ID to the div you want to remove and try the following:

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

Class selector will return too many elements as many elements are having the same class with almost similar structure.

Answer 4

Try using :

$('.k-in:contains("Roles = User, Admin, Approver")').parent('.k-top').remove();

See http://jsfiddle.net/336SX/.

Answer 5

When do you want to remove the element?

If it's on element click you could do something like:

$('.k-in').click(function() {
    $(this).closest('.k-top').remove();
});

If from any where else than you have to have an id or other atribute/property associated to filter the choice, as @James Donnelly jQuery will get all occurrences for:

$('.k-in).closest('.k-top').remove();

Answer 6

I started from the root to delete the div

$( 'ul li ul li ul li div.k-top').remove();

note li tag associated with the div (that was deleted) still remains. To get rid of the li, you can use this version instead:

$( 'ul li ul li ul li:first').remove();

it still works if you omit the first ul tag (root)

$( 'li ul li ul li:first').remove();

Answer 7

Use the following

$('.k-in').parent().remove();

If you have k-top the immediate parent of this span