Возникли проблемы при использовании XPath для выбора LI, содержащего определенный текст

Question

Вот HTML-код для элемента списка:

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

А вот JS, который я пытаюсь использовать, который не работает:

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' );

В идеале я бы просто назначил идентификатор для элемента списка, который я хочу скрыть, но это веб-сайт Wordpress, и это затрудняет его выполнение.

Что-то, что я заметил, в том, что в источнике страницы, <li> html не отображается (только в инспекторе). У меня JS работает в нижнем колонтитуле.

Любая помощь очень ценится. Я почесал голову над этим.

(Я также пробовал это без строки var matchingElement. Я пока не очень знаком с использованием Xpath, и в прошлом в основном использовал queryselector.)

Редактировать: вот весь код для <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>

Answer 1

Попробуйте следующий код ниже:

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

Вы также можете попробовать:

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

Answer 2

Я не уверен на 100%, что это исправит остальную часть кода, но ваш xpath должен иметь "//" перед ним. Вы бы знали об этом, если бы попытались проверить свой xpath в firebug или элементах dom из chrome.

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

// делаем это так же.

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' );

// код, который я использую, который удаляет элемент так, как задумано.

<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>