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

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});

Filter collapse div and highlight current link through data-filter

How can I filter the content of a div using data-filter and highlight current link at same time?
In this example the 'Item A' should be loaded as current item. The current item should have the text-bold class.
jsFiddle
<ul class="menu">
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="1">Item A</a>
</li>
<li class="menu-list js-menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="2">Item B</a>
</li>
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="3">Item C</a>
</li>
</ul>

try this code:-
$(function(){
//this is for first page load
$('a[data-filter="1"]').addClass('text-bold');
filter(1);
//when click on anchor tag
$('.menu-list a').click(function(){
$('.menu-list a').removeClass('text-bold');
$(this).addClass('text-bold');
var data=$(this).data('filter');
filter(data);
});
});
and create a function:-
function filter(filter){
$('.container [data-filter]').hide();
$('.container [data-filter="'+filter+'"]').show();
}
Demo

jQuery get the ID of <li> based on clicked element inside of it

Anyone know how can I get the id of based on the clicked element inside of it using jQuery?
This is my html tag:
<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>
Every LI element there is 3 button, the delete, send, and download.
let say from the 'apple LI element', i clicked the delete. i need to delete this LI element base on its id, or i want to send this base on its id. now how can i get the id of LI or what is the best way to get the ID of LI element?
aside from getting the id, i want to fire a JQUERY effect when the button delete is clicked.
I want this happen if the button delete is clicked.
**Remove the LI element which is clicked
**Apped a new LI element at the last LI element of ul using "FadeIn Effect".
this is my pseudo code
if button is clicked{
var the_id = get the id of LI where the button is clicked
now which one of button is clicked?
if button send is clicked{
some code here, i will need here the id to send...
}else if button download is clicked{
some code here, i will need here the id too..
}else if button delete is clicked{
remove the LI element (With fadeOut effect if possible)
append a new LI element at the end of LI whith fadeIn effect
}
//End of Statement
}
Anyone can help me? I only have small knowledge in jQuery, so any help will be appreciated. Thank You!!!

To get the id of li on the a click, you need to use closest.
This will get the closest li ancestor of the clicked element.
$('#grade_contamina').on('click', 'a', function() {
alert($(this).closest('li').attr('id'));
return false;
});

<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>
$(document).ready(function(){
$('#grade_contamina').on('click', 'a', function() {
var btn_name = $(this).attr('class')
var id = $(this).closest('li').attr('id');
if(btn_name == 'btn_send_once'){
alert(btn_name+" within "+id);
//your code
}else if(btn_name == 'btn_delete_once'){
alert(btn_name+" within "+id);
}else{
alert(btn_name+" within "+id);
}
})
})
The above code will get you the button's class along with its li's id

You could use jQuerys .attr(propertyname) like I did in this fiddle:
https://jsfiddle.net/d907e6gm/
$('ul > li').click(function(){
alert($(this).attr('id'));
});

I am not going to give all the code. I will just show you, how to get list item id and which button you have clicked.
$(document).ready(function(){
$("#ul_element a").on("click",function(){
idli = $(this).closest("li").attr("id"); // your list item id.
val = $(this).text(); // your link text
});
});
DEMO

Try filtering .parents() of clicked a , returning id of a parent li
$("#grade_contamina a").on("click", function() {
console.log($(this).parents("li")[0].id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.