We Keep Coding

Remove parents of the elements in Python Selenium

The HTML is located below, If the span value is less than 20%, then I want to remove the span child up until the <div class="action"> parent only.
So for example:
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
From the above HTML, these code should only be removed:
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
So what should left is:
<div class="item">
<div class="info">
</div>
</div>
This is my current python code:
items = WebDriverWait(driver, 10).until(EC.visibility_of_all_elements_located((By.XPATH, "//span[#class='content-name']")))
for item in items:
percentage_text = re.findall("\d+", item.text)[0]
if int(percentage_text) <= 20:
driver.execute_script("arguments[0].remove();", item)
But it only removes the span class and not its parent.
Here is the full HTML, I think it needs javascript to remove elements but I am very new on javascript I researched for more than 2 hours and I still can't find solutions. Thank you very much.
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 95% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 32% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 15% </span>
</div>
</div>
</div>
</div>

get to the parent of the parent:
driver.execute_script("arguments[0].parentElement.parentElement.remove();", item)

Web Scraping with BeautifulSoup4

I have some html data given below i want to extract the all times from the webpage and then store the all data inside a list Variable. How can i do that.. Help Please..
<div class=panchang-box-secondary-header>
<div class="list-wrapper pl-2">
<div class="list-style-thumbnail list-layout-horizontal">
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-sunrise"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">सूर्योदय</span>
<span class="d-block b">5:31 AM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-sunset"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">सूर्यास्त</span>
<span class="d-block b">7:24 PM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-moonrise"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">चन्द्रोदय</span>
<span class="d-block b">10:05 PM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-moonset"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">चन्द्रास्त</span>
<span class="d-block b">9:12 AM</span>
</div>
</div>
</div>

Try using this:
from bs4 import BeautifulSoup
a = '''<div class=panchang-box-secondary-header>
<div class="list-wrapper pl-2">
<div class="list-style-thumbnail list-layout-horizontal">
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-sunrise"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">सूर्योदय</span>
<span class="d-block b">5:31 AM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-sunset"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">सूर्यास्त</span>
<span class="d-block b">7:24 PM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-moonrise"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">चन्द्रोदय</span>
<span class="d-block b">10:05 PM</span>
</div>
</div>
</div>
<div class="list-item-outer py-2">
<div class="d-flex w-100 align-items-center">
<span class="icon-sprite icon-sprite-moonset"></span>
<div class=flex-grow-1>
<span class="d-block t-sm">चन्द्रास्त</span>
<span class="d-block b">9:12 AM</span>
</div>
</div>
</div>'''
soup = BeautifulSoup(a,'html.parser')
time = soup.select('.d-block.b')
times = [times.text for times in time]
print(times)
Output:
['5:31 AM', '7:24 PM', '10:05 PM', '9:12 AM']

Just extract "d-block b" and push it into wherever you want.

time = soup.find_all(class_ = "d-block b").text
This will make a list that gets all the time in the webpage source and store it in the variable time

how to for loop the bootstrap grid

I'm trying to make it like the following: https://getbootstrap.com/docs/4.3/examples/pricing/
it shows the screen divided into three section
so it should be like this I think...
<div class="row mb-2">
<div class="col-4 bg-danger">
.col-4
</div>
<div class="col-4 bg-warning">
.col-4
</div>
<div class="col-4 bg-success">
.col-4
</div>
</div>
But the problem is I am using django jinja template and for loop. so it groups the whole content.
This is my code but it won't do what's like in the link
<div class="row">
<div class="col-6 col-md-4">
<div class="card">
{% for all_episode in episode %}
<img class="card-img-top" src='{{all_episode.image.url}}'>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">{{ all_episode.season }}</span></small>
</div>
{% endfor %}
</div>
</div>

Selenium not visible exeception

<div class="modal left fade" id="sidebar_left" tabindex="1" role="dialog" aria-labelledby="sidebar_left">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close go-left" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="close icon-angle-left"></i></span></button>
<h4 class="modal-title go-text-right" id="sidebar_left"><i class="icon_set_1_icon-65 go-right"></i> Settings</h4>
</div>
<ul class="nav navbar-nav navbar-side navbar-right sidebar go-left">
<li id="li_myaccount">
<i class="icon_set_1_icon-70 go-right"></i> My Account <b class="lightcaret mt-2 go-left"></b>
<ul class="dropdown-menu">
<li><a class="go-text-right" href="a.html"> Login</a></li>
<li><a class="go-text-right" href="b.html"> Sign Up</a></li>
</ul>
</li>
<div class="header-brdr pull-left hidden-xs hidden-md go-left"></div>
<li class="dropdown">
<a class="dropdown-toggle go-text-right" data-toggle="dropdown" href="#">
<strong><i class="icon-money-2 go-right"></i>
USD </strong>
</a>
<ul class="dropdown-menu wow fadeIn">
I am trying to click the a.html but every time I got an ElementNotVisibleException
I am using the following line to do the job. Any suggestions ..
elem=driver.find_element_by_id('li_myaccount').click()

Jinja2 and Bootstrap carousel - "item active"

I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img> and <div> are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>

Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
Something like this:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>