Conceal all the division elements by referencing their id values

When I pass a value by ID in JavaScript to hide the li element, only the first li is hidden and the second one remains visible. How can I hide all relevant elements?

$(function() {
  $("#0").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add Content</a></li>

  </ul>
</li>

javascriptjqueryhtmlcss

Answer №1

Give this a try.

$(function() {
  $("li").each(function(index, item) {
    var li = $(item);
    if(li.attr('id') == "0")
      li.hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider image</a></li>

  </ul>
</li>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>

Using IDs the Right Way

A more efficient approach would be to use data attribute instead. Here's an example:

$(function() {
  $("li[data-id='0']").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li data-id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>

Answer №2

Each element has a unique ID. It is recommended to use classes when hiding multiple HTML elements. Your code should resemble the following, HTML: 

<li class="treeview 0">
              <a href="#">
                <i class="fa fa-files-o"></i>
                <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
              </a>
              <ul class="treeview-menu">
                <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
                <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
                <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

                </ul>
            </li>   
            <li class="treeview 0">
              <a href="#">
                <i class="fa fa-files-o"></i>
                <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
              </a>
              <ul class="treeview-menu">
                <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
               Content</a></li>



                </ul>
            </li>

JS: 

$(function() {
  $(".0").hide();
});

Answer №3

Avoid using the id attribute with the same value more than once; instead, utilize the class attribute.

Incorrect Code:

<div id="my-div">Hello, World A</div>
<div id="my-div">Hello, World B</div>

Corrected Code:

<div class="my-div">Hello, World A</div>
<div class="my-div">Hello, World B</div>

Also: It is recommended not to begin the value of id or class attributes with a number.

For your specific scenario:

$('.my-div').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div">Hello, World A</div>
<div class="my-div">Hello, World B</div>

Answer №4

To hide multiple elements, use a common class like the following example:

function hideElements() {
  $(".elementsToHide").hide();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="elementsToHide">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li id="0" class="elementsToHide">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i> Add 
                   Content</a></li>



  </ul>
</li>
<button onMouseUp="hideElements()">Hide</button>

Answer №5

Avoid using duplicate IDs, as mentioned by others.

If there is no alternative solution, you can select all LI elements and then filter out the ones with #0 to hide them:

$(function() {
  $("li").filter("#0").hide();
});

Another option would be to use $("li").attr("id","0").hide();. Alternatively, a DOM traversal method like closest() that includes the current element could also be utilized in this scenario (just ensure you understand how the method functions).

Check out this JSFiddle link for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...

javascriptjavahtmlcursorprocessing

Change between two occurrences periodically

I am trying to rotate between 2 different .js files in my website. Here is the code I have: <script type="text/javascript"> <!-- var jsfiles = ['/js/green.js', '/js/blue.js']; var randomLink = Math.floor(Math.random() * jsfil ...

javascript

Restrict date range in Bootstrap Datepicker based on database values

Is there a way to remove specific date ranges from the database? For instance, if I have date ranges from 15.01.2021 to 21.01.2021 and from 24.01.2021 to 03.02.2021, is it possible to prevent these dates from being selected in the datepicker? I would lik ...

javascriptmysqlbootstrap-4datepicker

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Convert Shopping Cart Items to JSON Format

When I click the button, I want to generate a JSON data but for some reason I cannot get the JSON. Can someone help me out with this issue? Here is the link to my shopping cart demo: http://jsfiddle.net/bkw5p/48/ ...

jqueryjson

Creating a full-page scrollbar in React when a component goes beyond the viewport

I'm currently working on an app that has a layout like this: https://i.sstatic.net/w3fty.png The middle component extends beyond the page, which is why I need a scrollbar to navigate down to it. However, I'm struggling to implement a regular wh ...

javascripthtmlcssreactjs

What is the best way to select the second HTML element identical to the first element using Selenium and Python?

Is there a way to click on a specific instance of a button that appears multiple times on a website? For example, how can I click on the second button and not the first one? Below is the code for the button I am trying to target: <a href="/us/en/outlet ...

pythonhtmlselenium

Unusual problem encountered on mobile devices with custom font-face and Font Awesome font combination

Experiencing difficulties with font-face implementation on mobile devices. The custom font-face definition for the Rex font is as follows: @font-face { font-family: 'RexBold'; src: url('RexBold.eot?#iefix') format ...

htmlcssmobilefont-facefont-awesome

Customizable Data Tables for Users

In my project, I am utilizing the Datatable library to display a table with 20-25 columns. Is there a feature in Datatable that allows users to customize which columns they want to hide and display? Here is how I have set up my Datatable: $("#datatable-b ...

javascriptjquerydatatable

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Implementing a function or template from one component into another within a Vue.js application, despite lacking a direct connection between the two components

Working on my Vue.js app, I encountered an interesting challenge: The layout of the app is simple: it consists of a header, a main view, and a navigation section at the bottom. Depending on the current page the user is on, I want to display a main action ...

javascriptvue.jscomponentsvue-portal

What could be causing the disappearance of the search icon while using jQuery Mobile?

The label, text field, and search icon should all be displayed horizontally, but currently the search icon is not showing up in that layout. Check out my fiddle here: http://jsfiddle.net/yCUY7/ <div data-role="content"> <label class="searchL ...

jquerycssjquery-mobile

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humi ...

htmlcssflexbox

Executing a Knockout.js destructive loop in a foreach fashion

Here is the HTML code with the data-bind elements: div data-bind="foreach: clientRequests" id="test2"> <div class="list-group" > <a href="#" class="list-group-item active"><b data-bind="text: client"></b& ...

javascriptarraysknockout.js

Displaying subsets of data based on the identifier of the primary array

In my JSON file, I have an array containing various categories and their respective subcategories. { "Women": [ { "id" : 1, "name" : "See All", &q ...

javascriptarraysreactjsjson

Exploring the functionality of Vue.js Multiselect with data

After making a Mounted axios call, I have received some response data from the server which is quite promising. Now, I want to extract a specific part of this data to use as an option in a multiselect :options. Here is what my Vue component looks like: ...

javascriptvue.js

When I send data using axios, I receive the response in the config object instead of the data

Currently, my web app is being developed using NextJS NodeJS and Express. I have set up two servers running on localhost: one on port 3000 for Next and the other on port 9000 for Express. In the app, there is a form with two input fields where users can e ...

javascriptnode.jsexpressaxiosnext.js

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng