How to hide sub-tasks on a list view

Question

I currently have a large project list that has numerous sub-tasks assigned to each main section. I'm looking to create a view that only displays the top level tasks.

I've looked at a previous question that was asked, providing the following solution:

jQuery('div[class="ms-vb  itx"]').find('span[style]').each(function(){
    if(jQuery(this).css('margin-left')!="0px"){
        jQuery(this).parent().parent().parent().hide();
    }
});

However it doesn't hide the sub-tasks for me. I'm currently testing said code in a script editor web-part and make a call to the Jquery library externally just before the script. Using:

Also tried various settings in the view itself, such as changing the folder settings but nothing allows you to hide sub-tasks out of the box.

Any help is greatly appreciated.

Answer 1

I tested the code in my online site. It actually works. Below are the steps I executed

1. Open the Task List - Ex AllItems.aspx
2. Edit Page
3. Add a Script Editor Webpart

4. Then used below code

   <script
         src="https://code.jquery.com/jquery-3.2.1.min.js"
         integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
         crossorigin="anonymous"></script>
   
   <script>
   jQuery(document).ready(function(){
       SP.SOD.executeFunc('sp.js', 'SP.ClientContext', run);
   });
   
   function run(){
       jQuery('div[class="ms-vb  itx"]').find('span[style]').each(function(){
           var left = Number(jQuery(this).css('margin-left').replace("px",""));
           if(left>20){
               jQuery(this).parent().parent().parent().remove();//hide();
           }
       });
   }
   </script>
   

Answer 2

Thanks Amal It solved my problem as well... with the previous version

<script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

<script>
jQuery(document).ready(function(){
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', run);
});

function run(){
    jQuery('div[class="ms-vb  itx"]').find('span[style]').each(function(){
        if(jQuery(this).css('margin-left')!="0px"){
            jQuery(this).parent().parent().parent().hide();
        }
    });
}
</script>