Develop Reference

How to restore div which is hidden using empty() function

html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content

.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>

By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})

How to remove class if another doesn't exist

I'm currently trying to display a hidden button which only displays when a link is clicked, but i'm unsure on how to display it if the link doesn't exist.
(function ($) {
$(document).ready(function()
{
$('.wp-block-file.aligncenter a').click(function(e)
{
$('.learndash_mark_complete_button').removeClass('hidden');
});
});
})(jQuery);
<div class="wp-block-file aligncenter">Open PDF</div>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">

You can check the length of the link element to add the class to the element:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
Demo:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
.hidden{
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">

avoid multiple cloned or duplicated div on button click and insertAfter the same last cloned div once

I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks

Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>

Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.

Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>

Get the hidden input when clicking on textbox

i need a little help about how to do it..
I have done lot of search but haven't find it.. So please if someone can help me out.
I have this little code here:-
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" style="display: none;">
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
As you can see i added style="display: none;" in the div where is situated the submit button.
I don't have lot of knowledge in jQuery or javascript but i need a simple javascript code that will change the "display:none" to "display:block" when someone click on the textbox..
Please i need your help, thank you very much...

Another way to do this is:
$(function () {
$('#myuniquetextbox').click(function(e) {
$('#whats-new-options').css('display', 'block');
});
});

Try this
$("#myuniquetextbox").on("focus",function(){
$("#whats-new-options").show();
})

Try below code
$("#mytextbox").focus(function() {
// this is when textarea is focused and button should show
$("#whats-new-options").show();
});
​
$("#mytextbox").blur(function() {
// this is when textarea is not focused and button should hide
$("#whats-new-options").hide();
});​

Try using bellow
<script>
$("#myuniquetextbox").click(function(){
$("#aw-whats-new-submit").slideToggle();
});
</script>

$("#aw-whats-new-submit").hide();
$("#myuniquetextbox").click(function() {
$("#aw-whats-new-submit").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" >
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>

you can also do this
$(function () {
$('#myuniquetextbox').on('click',function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Check your code here

html get div tag in many levels

I got class required on div tag, and I want to remove it change function of text field, but I can't get to that div level, please help me to reach this.parent.parent.closest('div')
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange(removeRequired(this, this.parent.parent.closest('div')))/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>

It seems that what you want is to add/remove the required class based on whether the input is empty or not.
$('.required').on('change', 'input', function(event) {
// add or remove required class
$(event.delegateTarget)
.toggleClass('required', this.value.length === 0);
});
It will work with the following HTML:
<div class='required'>
<div>
<div>
<input type='text' value='123'/>
</div>
</div>
</div>
It sets up event delegation on the outermost <div> elements and then sets or removes the required class based on the input value.
Demo

You dont have to mess up with javascript and jquery. You can bind the change event with jquery like this,
$(document).ready(function () {
$("input[type='text'] ").change(function () {
$(this).closest(".required").removeClass("required");
});
});

try this
$("input[type=text]").closest('div.required').removeClass("required");
onchange function be
$("input[type='text']").change(function(){
$(this).closest("div.required").removeClass("required");
});
or
$("input[type='text']").change(function(){
$(this).parents("div.required").removeClass("required");
});

Why not easily working with id?
<div id="input-wrapper" class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired(this, $('#input-wrapper'))"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>

By the way, if you want to reach the div class='required' with parent, you need 3 levels! Althougth the use of closest() is by far a better answer.
You can try:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired.call(this)"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(){
$(this).parent().parent().parent().removeClass('required');
}
</script>