Choose a navigation item from the list containing a nested span element

Question

Choose a navigation item from the list containing a nested span element

I've implemented selectnav from GitHub and it's functioning perfectly. However, my menu consists of list items with a description span inside each one, resulting in menu items structured as shown below:

<li><a href="somelink.html">Chapter Here <span>description here</span></a></li>

The issue is that selectnav returns the list item content including the description span, when I actually want it to only return Chapter Here. How can I remove the description span so that selectnav displays just the chapter title?

Hopefully, this explanation is clear. Thank you! :)

javascript jquery html css

Answer 1

Answer №1

const selectedItems = $('li a').clone().children().remove().end().text(); 
alert(selectedItems);

This code has been rigorously tested with your specific HTML structure.

Answer 2

const selectedItems = $('li a').clone().children().remove().end().text(); 
alert(selectedItems);

This code has been rigorously tested with your specific HTML structure.

Answer 3

Answer №2

Give this a shot

$(document).ready(function() {
    $('ul li').each(function(){
        $(this).find('span').remove();
    });
});

Answer 4

Give this a shot

$(document).ready(function() {
    $('ul li').each(function(){
        $(this).find('span').remove();
    });
});

Choose a navigation item from the list containing a nested span element

Answer №1

Answer №2

Similar questions

When calling a method that has been created within a loop, it will always execute the last method of the

Navigating through a modal without affecting the main page's scroll position

Can the `XMLHttpRequest` object stay active when the user switches to a different page?

Exploring Parquet Files with Node.js

Manipulating Object origin data

Can I obtain a dictionary containing the connections between labels and phrases from the classifier?

Efficiently updating database records without the need for page reloads using EJS

Toggle the visibility of a div depending on the user's selection

Guide to switch background image using querySelector

The Google Maps application is having trouble zooming in

Displaying NodeJS error messages directly in the main HTML file

My lists are not being styled by Embedded and Internal CSS

Steps for adding SVGs to a <div> element

Having trouble with yarn install? Keep receiving the error message "Other managers are not allowed"?

Utilize data fields beyond the export default in Vue

I'm having trouble with my dropdown menu functionality

The ChartistJs is unable to find the property '_index' of an undefined value, either being 0 or null

Creating a dynamic table using jQuery and XML content

When combining li, radio-input, and label, there is no padding at the top

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option