Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question:

<li class="disabled-result" data-option-array-index="1" style="">4" (0)</li>

Here is my attempt at using JavaScript to hide this list item, but it's not working as expected:

var xpath = "li[contains(.,'4"')]";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
matchingElement.setAttribute('style', 'display: none;" ) !important' );

Ideally, I would prefer to assign an ID to the specific list item I want to hide, but due to constraints with this being a Wordpress website, that method is not feasible.

An observation worth noting is that the <li> element does not appear in the page source, only in the inspector. The JavaScript code is placed in the footer of the page.

Any assistance on this matter would be highly appreciated as I have been struggling to find a solution.

(I also attempted the code without the var matchingElement declaration. My knowledge of XPath is still limited, as I am more accustomed to using querySelector.)

Edit: Included below is the complete code for the <UL>

<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0" style="">Size</li>
<li class="disabled-result" data-option-array-index="1" style="">4" (0)</li>
<li class="disabled-result" data-option-array-index="2" style="">5" (0)</li>
<li class="active-result" data-option-array-index="3" style="">Extra Large (5)</li>
<li class="active-result" data-option-array-index="4" style="">Large (7)</li>
<li class="active-result" data-option-array-index="5" style="">Medium (8)</li>
<li class="disabled-result" data-option-array-index="6" style="">Small (0)</li>
</ul>
javascripthtmlcsswordpressxpath

Answer №1

To solve this issue, consider implementing the code provided below:

const xpathQuery = "//li[contains(text(), '4\"')]";
const matchingElement = document.evaluate(xpathQuery, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
matchingElement.setAttribute('style', 'display: none;" ) !important' );

If that doesn't work, you can give this code a shot as well:

const xpathQuery = "//li[@class = 'disabled-result' and contains(text(), '4\"')]"

Answer №2

Not entirely certain if this will resolve the remaining code issues, but it's important to include "//" at the beginning of your xpath. Testing your xpath in firebug or chrome's elements dom would provide clarity on this matter.

var xpath = "//li[contains(.,'4"')]";

//Make sure to use double quotes like this.

var xpath = "//li[contains(.,'4\"')]";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
matchingElement.setAttribute('style', 'display: none;" ) !important' );

//The following code effectively removes the intended element.

<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0" style="">Size</li>
<li class="disabled-result" data-option-array-index="1" style="">4" (0)</li>
<li class="disabled-result" data-option-array-index="2" style="">5" (0)</li>
<li class="active-result" data-option-array-index="3" style="">Extra Large (5)</li>
<li class="active-result" data-option-array-index="4" style="">Large (7)</li>
<li class="active-result" data-option-array-index="5" style="">Medium (8)</li>
<li class="disabled-result" data-option-array-index="6" style="">Small (0)</li>
</ul>

<script type="text/javascript">
var xpath = "//li[contains(.,'4\"')]";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
matchingElement.setAttribute('style', 'display: none !important;')
</script>

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

Tips for validating date input in a TextBox using JQuery on an ASP.NET platform:

Here is some code I wrote: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datetime.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <tit ...

javascriptjqueryasp.net

Tips for positioning div elements with css tables

Is it possible to align the div elements in such a way that the first column element spans two rows, while the second column elements are stacked on top of each other using CSS tables? Below is a snippet of my HTML code: <html> <head><link ...

htmlcss

Using Flask to extract data from HTML pages

Simple inquiry: I am using Flask and I need to extract the string value from this array. I am familiar with utilizing request.form["name"], but I am unsure of how to give this variable a name. How can I retrieve this variable in order to display it on my s ...

pythonhtmlflask

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

Is there a method to include a custom style-sheet specifically for the 'Blackberry curve 2007'? Or perhaps implement a redirect that can identify this device and direct them to a different .html page? I'm looking to create a simplified versi ...

blackberrymobilecss

Macy.js, a masonry library, experiences compatibility issues with Internet Explorer 11. However, the problem can be resolved by activating "inspect mode"

Having an issue with macy.js on my website. The masonry element doesn't work on IE11 initially, but when I toggle the "inspect element" feature on and off, it starts working suddenly. Is there a way to trigger it automatically right after the website ...

javascriptinternet-explorer-11masonry

The v-on:click functionality seems to have become unresponsive after being dynamically added through modifying the inner

While attempting to create a dynamic navbar, I encountered an issue. The goal was to have the navbar switch from displaying "login" and "register" when a session is logged in, to showing "profile" and "logout". The buttons for login and register were fun ...

javascriptvue.jsvuejs2

How can escape characters be utilized in the JavaScript split function?

Here are two examples that achieve the same result. I'm curious as to why Option 1 was included in a code example I came across instead of Option 2? What is the significance of the forward/backward slashes in '/\&/'? Option 1: ...

javascript

Using an anonymous function in Javascript to change the background color of a div on mouse-over directly from the HTML code

I came across this code snippet in the provided link and as a beginner in JavaScript, I am unsure how to call the JavaScript function from the HTML code. Due to them being anonymous functions, I am struggling to invoke them. Can someone guide me on how to ...

javascriptjqueryjquery-events

Using Xpath in selenium without specifying the exact element can make

I am currently learning how to use Selenium Webdriver. I have been relying on Firebug and Firepath to create xpaths for identifying web elements, but I have encountered issues with using these xpaths (such as "Xpath cannot be evaluated into a web element") ...

xpathseleniumwebdriver

Encountering difficulties when attempting to inject NotifierService into an Angular Service

I am attempting to incorporate Angular NotifierService into my service class so that I can display error notifications in case of any exceptions from the service side. I attempted to inject a bean of NotifierService in the constructor of my service class, ...

javascriptangulartypescript

Renaming file names for Bootstrap 4.5 demonstrations

Trying to utilize a Bootstrap 4.5 example, but running into issues when renaming the HTML or CSS files - it breaks the formatting link for the page. Is there a way to duplicate the original example files and modify the names (such as "my_page.html" or "m ...

cssbootstrap-4

What are the reasons to steer clear of setting y.innerHTML equal to x.innerHTML?

If we have a DIV x on the webpage and want to duplicate its contents into another DIV y, we might be tempted to use the following code: y.innerHTML = x.innerHTML; This can also be achieved using jQuery: $(y).html( $(x).html() ); However, it is recommen ...

javascriptjqueryhtmlbrowser

Leveraging Watchers on props in Vue 3's Script Setup

When passing a prop to a component that declares its state, I am attempting to watch the prop and set the CSS styling accordingly. However, for some reason it is not working as expected. Can anyone help me figure out what might be wrong? <script setup ...

javascriptvue.jsvuejs3vue-composition-apivue-props

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

javascripthtmlbrowsercross-browseruser-experience

Unexpected updates occurring in custom Google Sheet functions

Currently, I am utilizing a personalized function to retrieve price data for EVE Online. However, I am encountering an issue where the function is updating every 10-20 minutes, leading to a depletion of my daily URL Fetches quota. The primary function can ...

javascriptjsongoogle-apps-scriptgoogle-sheets

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

htmlcssgoogle-chrome

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

The Best Way to Display Quad Wireframe in Three.js using OBJ Model

I am trying to display the wireframe of OBJ meshes using Three.js. However, Three.js can only render triangles, so I came up with the idea of creating a line for each edge of the model. After parsing the OBJ file and iterating through its vertices and fac ...

javascriptthree.js3d

Encountering Datepicker Issue in Your Angularjs App?

I am currently working on a web application using Angular JS and I encountered an error when trying to incorporate a date picker. The error message displayed is "elem.datepicker is not a function" To implement the datepicker, I found reference code in thi ...

javascriptangularjsdatepicker

What is the best way to remove all attributes from one interface when comparing to another?

Consider the following two interfaces: interface A { a: number; b: string; } interface B { b: string; } I am interested in creating a new type that includes all the keys from interface A, but excludes any keys that are also present in interface B. ...

javascripttypescript