Develop Reference

How i can delete text inside li with jquery or regular javascript, wordpress theme

I want to delete text "previous" inside li in wordpress theme.
the text to delete
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
I tried with jquery like this :
var $ = jQuery;
$('li.flex-nav-prev').html('');
$('li.flex-nav-prev').html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
It's works in snippet but it doesn't work on website.
Thank you so much

To delete just the text of an element try this jquery code:
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();

Is there any way to apply javascript function on current open page url

<div><li class="item-list1"></li>
<ul>
<li class="item"><a href='/link1'>link1</a></li>
<li class="item"><a href='/link2'>link2</a></li>
<li class="item"><a href='/link3'>link3</a></li>
</ul>
</div>
<div><li class="item-list2"></li>
<ul>
<li class="item"><a href='/link4'>link4</a></li>
<li class="item"><a href='/link5'>link5</a></li>
<li class="item"><a href='/link6'>link6</a></li>
</ul>
</div>
Basically I want to apply JavaScript property on the grandparent of the current URL.
Like if the current open link is link4 then I want to find grandparent of the open link that is item-list2
I am doing window.location.href().parent().parent() but it not helps.
Edit:
Thanks, everyone for helping me out,
solution I got is given below:
const pathname = window.location.pathname
var li_attr = $(`a[href='${pathname}']`).closed("ul").prev("li")
as suggested by #bad_kotya and #freedomn-m

const pathname = window.location.pathname
$(`a[href='${pathname}']`).parent().parent()

Your HTML is not valid.
Once it is valid you can do this:
const pathname= new URL("https://www.yoursite.com/link4").pathname; // location.pathname; // on your server
console.log(pathname);
// must be quoted due to the / in the pathname
const $link = $("[href='" + pathname + "']"); // you can use a template literal too
const $parentUl = $link.closest("ul")
const $ulContainer = $parentUl.closest("li");
console.log($ulContainer.attr("class"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li class="item-list1">
<ul>
<li class="item">
<a href='/link1'>link1</a></li>
<li class="item">
<a href='/link2'>link2</a></li>
<li class="item">
<a href='/link3'>link3</a></li>
</ul>
</li>
</ul>
</div>
<div>
<ul>
<li class="item-list2">
<ul>
<li class="item">
<a href='/link4'>link4</a></li>
<li class="item">
<a href='/link5'>link5</a></li>
<li class="item">
<a href='/link6'>link6</a></li>
</ul>
</li>
</ul>
</div>

How can I select a box which has specific text?

I have this HTML:
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
I want to select this part:
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
The logic is the content of <h5> tag. I want the one which is specific text. Actually expected result is an array of both that name and that age. Some thing like this: var res = ['Peter', 19];.
But my code selects all those <ul>s:
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
});
How can I fix it?

You can use :contains() to find the H5 that contains the specific string you want. Then use .next() to get that ul associated with the h5
$("h5:contains('specific text')").next('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
console.log(res)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>

Jquery script for getting data from ul list :
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
// console.log(res);
});
var htmVal = '';
$('h5').each(function(index){
htmVal = $(this).html();
if(htmVal == 'something else'){
var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()};
console.log(detail);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>

Convert dynamic DOM structure to JSON

How can convert below DOM to JSON array which will have many more leafs in thefuture . I have tried a lot but didn't got any solution. I found this but it is not possible in my case.
HTML Code
<ul id="org1">
<li>
Main
<ul data-self="1">
<li data-self="2" data-parent="1">A
<ul data-self="2">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Required is
{
1:{
2:{5,6,7,8,9,10},
3:{11,12,13,14}
}
}
Script
function recursive(dis)
{
$(this).find(' > ul ').each(function(){
params[$(this).attr('data-self')]=[];
var i=0;
$(this).find('li').each(function(){
if($(this).has('ul'))
{
params[$(this).attr('data-parent')][i++]=rec(this);
}else
{
params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
}
});
});
}
recursive('#org1');
console.log(params);

I would prefer something like the following. The 2 changes in the HTML you need to make are:
1) Add a class to your ul such as <ul data-self="2" class="nodes">. 2) Add a class to the wrapper ul such as <ul data-self="1" class="parent">.
var json = {};
$("#org1").find("ul.parent").each(function() {
var $this = $(this);
json[$this.data("self")] = {};
var $nodes = $this.find("ul.nodes");
$nodes.each(function() {
var children = $(this).find("li").map(function() {
return $(this).data("self")
}).get();
json[$this.data("self")][$(this).data("self")] = children;
});
});
alert (JSON.stringify(json));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
<li>
Main
<ul data-self="1" class="parent">
<li data-self="2" data-parent="1">A
<ul data-self="2" class="nodes">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3" class="nodes">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>

html / css conditional styling in submenu

I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below the menu goes three levels deep.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
<ul id="thirdLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>
Most menus will be generated as above, but also the one below (without the third level) is an option.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
</li>
</ul>
</li>
<ul>
</li>
</ul>
What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.

I've made a jsFiddle for you: http://jsfiddle.net/danAR/
jQuery code:
$(function() {
$('ul#secondLevel li').each( function(index, item) {
$(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
});
});
CSS:
a.aBold {
font-weight:bold;
}

I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:
var $third = $('#thirdLevel');
if ($third.length)
{
$third.closest('a').css('font-weight', 'bold');
}