0

Here is the HTML for the list item:

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

And here is the JS I'm trying to use, which isn't working:

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 just assign an ID to the list item I want to hide, but this is a Wordpress website and that makes it difficult to do.

Something I noticed is that in the page source, the <li> html doesn't show up (only in inspector). I have the JS running in the footer.

Any help is greatly appreciated. I've been scratching my head over this.

(I also tried this without the var matchingElement line. I'm not very familiar yet with using Xpath, and in the past have mostly used queryselector.)

Edit: Here is the entire 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>
CAtkins
  • 11
  • 5

2 Answers2

0

I'm not 100% sure this will fix the rest of the code, but your xpath needs to have "//" in front of it. You would know this if you tried to test your xpath in firebug or the elements dom of chrome.

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

//do this just 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 code I'm using, that removes the element just as intended.

<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>
IamBatman
  • 975
  • 12
  • 18
  • Thank you, I added the `//` but it still isn't working. I did check the elements panel of the chrome inspector, but I wasn't seeing anything about the Javascript so maybe I'm not quite using it correctly. – CAtkins Aug 28 '18 at 18:40
  • Ok, so I ran your code in the console. Your getting a invalid or unexpected token when running the first line of var xpath. Reason is because of the double quote. As Monkey Coder stated, do the escape, but instead of using double quotes again around 4, do single quotes. Like this: `var xpath = "//li[contains(.,'4\"')]";` – IamBatman Aug 28 '18 at 19:19
  • Hm, it still isn't working but now I'm getting the error cannot read property `setAttribute` of null. – CAtkins Aug 28 '18 at 19:29
  • I'm having the feeling you have more than one item on the page that is matching the xpath. I just tried two of the same element and it returned back 'Uncaught TypeError: Cannot read property 'setAttribute' of null at :1:17' – IamBatman Aug 28 '18 at 19:44
  • I just tried `var xpath = "//li[contains(.,'4\" ')][1]";` which is returning the same error. – CAtkins Aug 28 '18 at 19:49
  • With the above posted UL, your code works fine. Is there another UL on the page? Can you post the link to the source so I can check what's going on? I'm having a feeling you have two of the same elements on the same page. – IamBatman Aug 28 '18 at 19:50
  • The copy I'm working on with 4" added to sizes is being worked on and password protected, but I will add the entire page's code above in my question. Thank you for your help. – CAtkins Aug 28 '18 at 19:58
  • Before you do that, see my edit and see if you're running it exactly as I have it. – IamBatman Aug 28 '18 at 20:07
  • Unfortunately I can't add the code because it's too large. Here is a link to the original page, which doesn't include my 4" size but is otherwise about the same: [link](https://www.architecturalmailboxes.com/product_category/post-mount-mailboxes/) – CAtkins Aug 28 '18 at 20:08
  • Yeah, I dunno what your doing, I've done exactly what you have done with javascript at the bottom in the footer of the page and it works just fine for me. It removes the "4" size as you wrote it. – IamBatman Aug 28 '18 at 20:20
  • Hey IamBatman, I double checked and am still getting the same error. Edit: interesting. Ok, thank you for your help. – CAtkins Aug 28 '18 at 20:21
  • Can I ask why you're adding another paranthesis and a css property outside of the style? This is what you are creating `
    • ` – IamBatman Aug 28 '18 at 20:28
  • You know, I'm actually not sure but it didn't seem to work properly when I did `matchingElement.setAttribute('style', 'display: none !important;" );` – CAtkins Aug 28 '18 at 20:32
  • Seriously look at the code you just commented with above. We just went over this. You need to escape quotes and then put a single quote to close it. `matchingElement.setAttribute('style', 'display: none !important;\"');` – IamBatman Aug 28 '18 at 20:38
  • and fyi, you don't need to close it off when your are setting an attribute you can just do this: `matchingElement.setAttribute('style', 'display: none !important;');` – IamBatman Aug 28 '18 at 20:41
  • Ok my mistake, I've corrected that but still this same error. My exact code is ```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;\"')``` – CAtkins Aug 28 '18 at 20:43
  • Yeah, it works for me. Sorry I couldn't help you any further. Hope you figure it out. – IamBatman Aug 28 '18 at 20:47
  • My best advice I could give you to debug this yourself is to do the following: Step 1.) Open the console when on your page. 2.) Enter you first line: var xpath = "//li[contains(.,'4\"')]"; 3.) Press enter. 4.) If it says undefined, it may of worked, so lets check what it found. 5.) type in the var name "xpath" and press enter. 6.) If it returns the element we are looking for it's not your xpath. Move on to the next one and repeat. Once you find the error, look at that line and figure out why it's doing it. – IamBatman Aug 28 '18 at 20:53
  • If it's the xpath, go back to elements, do a find and put your xpath in "//li[contains(.,'4\"')]", is it finding it? If so, is it more than one found? If so, maybe need to narrow it down to just the one you want. Try a different xpath locator or use indexes like you tried before maybe? Just throwing out some helpful tips in debugging. – IamBatman Aug 28 '18 at 20:55
  • It's complaining about a null value with setAttribute, which usually means document.evaluate didn't find anything leaving matchingElement "null" as in "empty". – IamBatman Aug 28 '18 at 20:57