Ruby, Nokogiri Remove <ul> element selected by <class="foo"> - html

I want to remove a Nokogiri node but I don't get it.
I got HTML code like this:
<div class="metis manual-toogle" id="tocList">...
<li id="tocElement-ebook_cs_1111111_11">...
<a data-content href="url" class=" "></a> <!-- only this urls I want -->
<ul class="foo">
<!-- the following content and urls I want to remove -->
<li class id="tocElement-ebook_cs_1111111_cs12">
<a data-content href="url" class=" "></a>
...
<a data-content href="url" class=" "></a>
</li>
</ul>
</li>
</div>
What I've tried so far:
document = Nokogiri::HTML.parse(html_input)
document.xpath('//ul[#class="foo"]').each {|x| x.remove}
document.xpath('//ul[#class="foo"]').children.map(:&remove)
What I'm doing wrong?
Edit:
I wan't to parse some URL's. I got the html structure like above. The URL I want is in the <li></li> block nested like <a data-content href="url"></a>. The problem is, inside the <ul></ul> is a <a data-content href="url"></a> too. I can extract every URL, but only need the main URL's.
It's a book with some chapters, I can download the chapter with the first link. Every sub-chapter (inside the <ul>) got a own pdf.
I can't use regular expression because the links are not build the same. For example in one book it's
chapter 1 pdf: ...-ch1.pdf (contains all sub-chapter)
chapter 1-1 pdf: ...-ch1-1.pdf
chapter 2 pdf: ...-923df2.pdf
chapter 3 pdf: ...-ch3.pdf
The HTML-Code is a mess. The easiest way is to remove the <ul> block itself.

You are not providing much context or detail here. But, the following code should remove the item you want if you are selecting it correctly. Please provide more details such as your output received, output expected, etc.
Given the limited information, you could try this bit:
UPDATE:
html.html
<div class="metis manual-toogle" id="tocList">...
<li id="tocElement-ebook_cs_1111111_11">...
<a data-content href="url" class=" "></a> <!-- only this urls I want -->
<ul class="foo">
<!-- the following content and urls I want to remove -->
<li class id="tocElement-ebook_cs_1111111_cs12">
<a data-content href="url" class=" "></a>
...
<a data-content href="url" class=" "></a>
</li>
</ul>
</li>
</div>
main.rb
require 'nokogiri'
require 'open-uri'
require 'pry'
doc = Nokogiri::HTML(open('html.html'))
doc.xpath('//ul[#class="foo"]').remove
doc.xpath('//a').each do |item|
puts item
end
Output:
~/code/projects/test ⌚ 8:28:32
$ ruby main.rb ‹2.6.1›
<a data-content href="urliwant" class=" "></a>
We worked this out through chat. Above example works. But, for his specific case we needed to do this because of the messy html:
document = Nokogiri::HTML(open('html.html'))
document.css('//ul//ul//ul').remove
document.css('ul .collapse').remove
links = document.xpath('//*[#id="toc"]//ul')
File.open("input.html", "a") do |output_txt|
links.each do |item|
output_txt.write(item)
end
end

Related

Editing a header with css

I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)

Anchor links just won't work

I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>

using autocomplete css in HTML code (no design applied for my example)

I want to use an autocomplete's CSS in HTML code ... but it doesn't work. I tried to fetch the code from firefox, but I got no design on the HTML code.
Let's clarify the question:
My need: (I want to get the same design as the image below)
An image about what I need
CSS code of this image:
https://github.com/hailwood/jQuery-Tagit/tree/master/css/themeroller
Tags.css and bootstrap/bootstrap.css
What I tried:
<ul class="ui-autocomplete">
<ul class="tagit ui-widget ui-widget-content">
<li class="tagit-choice ui-widget-content ui-state-default tagit-new">
<a href="#" class="ui-corner-all">
<div class="ui-widget-header">
Title <span style="font-weight:normal">(used 4 times)</span>
</div>
<div class="ui-widget-content">a description here
</div>
</a>
</li>
</ul>
</ul>
But no design applied for my code! I used the right classes and ids.
Please let me know where I made a mistake.

<li> does not display

In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.

ExpressionEngine's tag integration issue

I'm fairly new to expression engine so forgive me if this question comes across pretty obvious I have a slight problem with integrating exp:resso store tag in my temple, for some reason all
the code i apply under exp:resso's {store} tag doesn't appear on my broswer. The code below demonstrates how i have structured my EE tags, please correct me if i'm wrong...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="1" return="cart"}
<ul class="inventory">
<li class="item2"> {p_productimage}<img class="itemImg" alt="" src="{p_productimage_image}"/>{/p_productimage}
<div class="product-fam1">
<h3>{p_title}</h3>
<a class="viewItem" href="#"><img src="iamnatesmithen.com/fluotics/css/images/viewItem.jpg";</a>
</div>
</li>
</ul>
{/exp:store:product}
{/exp:channel:entries}
ExpressionEngine test site: http://www.iamnatesmithen.com/ExpressionEngine2/index.php/inventory
Current static site: http://iamnatesmithen.com/fluotics/products.html
Looks like you're not passing the product's entry id to {exp:store:product} correctly. Have you tried this? Note {exp:store:product entry_id="{entry_id}"...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="{entry_id}" return="cart"}
<!-- snip -->
{/exp:store:product}
{/exp:channel:entries}