Conceal or eliminate an element from the list upon selection

I have a list that is unordered, and I am looking for a way to remove an option from the list if it is selected.

For Example:

If a user chooses one of the options from the list, I want that option to be removed as it will be considered the selected value. Is there a way to achieve this using jQuery or CSS? Can someone provide assistance?

The option gets removed successfully,

but the problem arises when if the user selects "A", and then later chooses "B", how can I add back the option "A" into the list?

Below you will find the HTML code snippet:

<dl id='assettypes' class="dropdown">
  <dt>
  <a href="#">
     <span>
        Select option
     </span>                                              
   </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>

javascriptjqueryhtmlcss

Answer №1

To make each <li> element clickable, you need to attach a click event handler to them. Use $(this) to target the clicked element and then use .hide() to hide it:

$('#ggg > li').click(function() {
  $(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<dl id='assettypes' class="dropdown">
  <dt>
  <a href="#">
     <span>
        Select option
     </span>                                              
   </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>

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

Should I use React with Spring Boot or just Spring Boot for this project?

My partner and I are collaborating on a project for our current semester course. As we delve into our research on potential technologies to use, it seems like Spring Boot for the server side along with MySQL or Postgres for the database are emerging as s ...

javascriptjavaproject

Creating a list of objects in ReactJS

Currently, I am attempting to iterate through object properties (using "Name" as an example) and list them within a loop in a function. The method I have come up with seems quite clumsy and doesn't feel optimal. Here is the code snippet: const Ite ...

javascriptreactjsbabeljs

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

Has anyone had success implementing a responsive design with Highcharts to ensure charts look great on both mobile and desktop screens? By default, Highcharts do adjust when resizing the browser window, but sometimes the X-axis can become cluttered by tic ...

javascriptjquerysvghighchartsresponsive-design

Tips to avoid multiple HTTP requests being sent simultaneously

I have a collection of objects that requires triggering asynchronous requests for each object. However, I want to limit the number of simultaneous requests running at once. Additionally, it would be beneficial to have a single point of synchronization afte ...

javascriptangulartypescriptrxjsrxjs-pipeable-operators

What is the best way to include a logo in the email body by either embedding it or attaching it as a file, using C# or

In attempting to send an email using C#, I am encountering an issue. The logo that I attach to the body of the email is being sent as an attachment rather than in embedded format. My goal is for the logo to be sent in embedded format within the email. ...

javascriptc#htmlasp.net

Guide to creating a navigation bar that expands when you expand navigation items

My portfolio website features a handful of navigation items for various views. I simply copied the default navigation code from the Bootstrap site. However, when I expand the "hamburger" menu, the navigation remains the same size, causing the expanded item ...

htmljquerycssbootstrap-4navbar

Running the Ajax request in a web browser is successful, but it does not work when run in Cordova app on iOS

I am currently working on a jQuery Phonegap app. The Ajax request I have created works perfectly in my browser: <script type="text/javascript"> $(document).bind("mobileinit", function() { $.support.cors = true; $.mobile.allowCrossDomainPage ...

androidjqueryiosajaxcordova

error message: "The CSRF token is either missing or incorrect, please try again."

I implemented window.CSRF_TOKEN = "{{ csrf_token }}" within a script tag in restaurant_detail.html where my react page for posting reviews is rendered. However, I encountered an error. Upon checking in my onSubmit function, I confirmed that the csrf token ...

javascriptdjangoreactjsdjango-rest-frameworkaxios

The error message "props.text is undefined in React Native" indicates that there is an issue with accessing the property text within

//**// import { StatusBar } from 'expo-status-bar'; import {StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native'; import {useState} from "react"; import GoalItem from "./components/GoalItem"; export defau ...

javascriptreactjsreact-native

Leverage Async/Await in React.js with the Axios Library

Recently, I came across an interesting article on Medium titled How to use async/await with axios in react The article discussed making a simple GET request to a server using Async/Await in a React.js App. The server returned a JSON object at /data with t ...

javascriptjsonreactjsasynchronousecmascript-2017

Persist data in vuex with commit objects

Currently, I am attempting to retrieve objects from an axios response using the $store.commit('fetchFunction', response.data) method. I aim to access this data globally in my SPA (vue-router) by using computed in App.vue (the root component). Her ...

javascriptecmascript-6vue.jsaxiosvuex

What could be causing Express to display a different page than the one specified in res.render?

Upon trying to view the compare.ejs page, I encountered an unexpected issue where a different page was being rendered instead. What could be causing this discrepancy? Here is my app.js code: var compare = require('./routes/compare')(nav); app.u ...

javascriptnode.jsexpress

Is it advisable to conceal the URL for a fetch request?

As I work on developing a React website, I've encountered the need to manage fetch request links differently for development and production environments. For example, using http://localhost:3000/users in development and in production. This setup is ...

javascriptreactjsgitfetch-api

The Jquery contains method may fail to work properly when the string being checked contains spaces

When using jQuery's :contains selector, keep in mind that it may not work properly if the string contains spaces. For instance, if you want to select a dropdown value like 1st Letter, you may encounter issues. Here is an example where it works fine: ...

jqueryselenium-webdriverautomationwhitespacecontains

Transforming a two-column text document into a set of key-value pairs

Recently, I've been diving into the world of Node.js and Express. My current challenge involves converting a text file into key-value pairs. The approach I'm taking with my staircase program is as follows: https://i.sstatic.net/GPs200IQ.png Th ...

javascriptnode.jsarraysnpm

Error: The jQuery function does not recognize the expression: #

The code successfully removes the "hidden" class from the designated object, but encounters an issue when trying to add it back. I have attempted various methods without any luck. Uncaught Error: Syntax error, unrecognized expression: # $(function() { ...

javascriptjquery

Using Node.js to integrate Stripe payment method

After successfully implementing a stripe payment method with node and express, I encountered some issues. Although the payment runs smoothly and returns a success message, the customer is not being added to the list of stripe customers. Additionally, my no ...

javascriptnode.jsexpressstripe-paymentsmern

Find the line containing the selected text within a JavaScript code

I am working on a contentEditable div where users can enter multi-line text. I need to be able to inspect the line that the user is currently typing in when they press enter. Is there a way to retrieve the context of that specific line (or all lines)? Is ...

javascripthtmlcsstextselection

How do I invoke the month function in Fullcalendar?

I'm currently utilizing the fullcalendar plugin and I'm looking to customize my calendar so that it initially loads on June by default. I found a resource that might be helpful: However, I am not very proficient in JavaScript and the instruction ...

javascriptjqueryjquery-pluginsfullcalendar

The image source may vary, but the image itself remains the same

When I click on a button, the image should change but it's not happening in the browser even though I can see that the source code is being updated. How do I solve this issue? // AvatarGenerator.eyes = 1; moveRightBtn.on('click', function( ...

jqueryimageeventscanvasfabricjs