0

Actually,my problem is not solved completely...The thing is that i made a tree in mvc and for having expanded and collapsed tree ,i added this java script code which you can see below. at first i add a 'handle' class to each

  • node and then i will add collapse expanded on it.But after applying this codes my tree is not displayed properly...

    enter image description here

    in the image u can see that 'fff' and 'ggg' must be in a same level because they are both children of 'eee' . 'ccc' seems to be the child of 'bbb' but it also must be in the same level as 'bbb'.Because both 'bbb' and 'ccc' are children of 'aaa'....

    i dont know why java script code does not work.

    $(document).ready(function () { jQuery("#tree ul").hide();

       jQuery("#tree li").prepend("<span class='handle'></span>");

    jQuery("#tree li:has(ul)")
      .children(":first-child").addClass("collapsed")
      .click(function () {
          jQuery(this).toggleClass("collapsed expanded")
            .siblings("ul").toggle();
      });
});

$(function () {
    $("ul#tree li").each(function () {
        as = $(this).children('a');
        if (!as.length) {  //
            $(this).hide();
        }
    })
});
    • sepideh
    • 43
    • 6
    • What is the code you have and what is the expected results? – Whitecat May 11 '17 at 20:56
    • sorry..part of question disapeared...so i write it here again.I am so new in java script.I created a tree in MVC with 'ul' an 'li' tags which look like below: there are some 'li' tags which have only 'span' and do not contain 'a' tags.how i can remove them?i just want to keep first' li 'and those which contain 'a' tags.. – sepideh May 11 '17 at 20:57
    • 1
      @sepideh That's exactly what it says in the question. The problem is you haven't posted the code that you need help fixing. We're not going to write it for you. – Barmar May 11 '17 at 21:00
    • Take a look at the `:having()` selector in jQuery. – Barmar May 11 '17 at 21:01
    • Possible duplicate of [Remove element by id](http://stackoverflow.com/questions/3387427/remove-element-by-id) – Whitecat May 11 '17 at 22:51
    • Possible duplicate of [How do you remove and hide HTML elements in plain Javascript?](http://stackoverflow.com/questions/7458619/how-do-you-remove-and-hide-html-elements-in-plain-javascript) – Whitecat May 11 '17 at 22:54

    2 Answers2

    0

    There are multiple ways to eliminate <li>, the best is the way that is most clear to you.

    You can either eliminate an <li> tag by rewriting all elements in the <ul>. Or you can loop through all elements in the <ul> and delete the <li> you dont want.

    Here is how to delete an element with jquery, answer found here.

    $target.remove();
    Community
    • 1
    • 1
    Whitecat
    • 3,882
    • 7
    • 48
    • 78
    0

    This uses jQuery to hide anything without an a tag in it. Requires jQuery. I also cleaned up the broken html code.

        <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<ul id="tree">
  <li>
    <span class="handle"></span>
  </li>
  <li>
    <span class="handle expanded"></span><a onclick="navigate('../CSS/logo_small.png');" href="#">hello</a>
  </li>
  <li>
    <span class="handle"></span>
  </li>
  <li>
    <span class="handle expanded"></span>
    <a onclick="navigate('../CSS/Alarm-Plus-icon.png');" href="#">helloworld</a>
  </li>
</ul>
<script>
  $(function(){ //wait for everything to load
    $("ul#tree li").each(function(){  //loop all the lis in the ul element with an id of 'tree'
      as = $(this).children('a');     //look for an 'a' elements that are children of this li
      if(!as.length){                 //if they have none, hide() them
        $(this).hide();               //hide
      }
    })
  })
</script>
    pendo
    • 792
    • 2
    • 5
    • 27