We Keep Coding

Find div before button

Im trying addClass to wizard-step when button clicked, but still no luck :/
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user"></i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" onclick="step0(this);" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
JavaScript:
<script>
function step0(element) {
$(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
}
</script>
Can anyone please help me !

prev is used to retrieve a previous sibling element. The .wizard-step you want to target is a child of a sibling to a parent of the button being clicked. As such you need to use closest() instead.
Also note that onclick (and all the other onX attributes) are not good practice and should be avoided. As you're already using jQuery you can attach your event unobtrusively, like this:
jQuery($ => {
$('.btn').on('click', function() {
$(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
});
});
.wizard-step-active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user">User icon</i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
Alternatively, instead of calling find() from the shared parent, you could select the form and use prev():
$('.btn').on('click', function() {
$(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});
Either is fine, it just depends on how your HTML is structured as to which fits best for this use case.

You don't want the div immediately before the button, but the one containing the relevant item(s). So instead of $(element).prev('div') write $('.mt-4').

Your this parameter is referring your button, not your div.
You can do this without Jquery, just using your function like this:
function step0() {
const element = document.getElementsByClassName('wizard-step');
element.classList.add('wizard-step-active');
}
So, you don't need to pass this as a parameter to step0 function.

jQuery element removal

I want to remove an element using jQuery.
HTML:
<div class="listContainer" id="listContainer">
<div class="listItem">
<div class="name">
Item Name
</div>
<div class="amount">
<input type="text" class="amountInput" />
</div>
<div class="delete">
<div class="deleteBtn">
X
</div>
</div>
</div>
</div>
There are several listItemss on the page and each of the listItem will be created dynamically using jQuery. I want to delete amountInput of specific listItem by clicking the deleteBtn, so I tried doing:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".amountInput").remove();
});
This doesn't work. But on the other hand if I try to delete a listItem as a whole, the code works:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".listItem").remove();
});
Why is this happening?
Thanks.

Because .closest propagates to the top of the HTML. So it searches for the first parent that matches your selector. That is why it cannot find .amountInput. Because it isn't a parent of your button.
To get .amountInput you have to:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".listItem").find('.amountInput').remove();
});
This will get the wrapping .listItem element and then search it for the .amountInput element.

Your selector is not correct, use find instead of closest could be helpful in this case, also $(this) in your sample is related to deleteBtn class not to listContainer.
$("#listContainer").on("click", ".deleteBtn", function() {
console.log($(this)) // this here is .deleteBtn not listContainer
$(this).closest(".listItem").find(".amountInput").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listContainer" id="listContainer">
<div class="listItem">
<div class="name">
Item Name
</div>
<div class="amount">
<input type="text" class="amountInput" />
</div>
<div class="delete">
<div class="deleteBtn">
X
</div>
</div>
</div>
</div>

JQuery Click Function working for just one time

I'm trying to use jQuery click method to show and hide a part of my sections after clicking on a certain part of the page .
My HTML code:
<section class="apply_section text-center center-block" id="apply_section">
<div class="apply_container">
<div class="container">
<div class="row apply_row">
<div class="col-md-8 apply_form">
<form class="form" action="mail.php" method="POST">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="" required="required" name="firstName">
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<textarea class="form-control" placeholder="" required="required" name="message"></textarea>
</div>
</form>
<input class="btn btn-success btn-block" type="submit" value=""></input>
</div>
</form>
</div>
<div class="col-md-4 apply_image">
<a><img src="images/icon.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
The jQuery script :
$('#apply_section .apply_image a').click(function(){
if($('#apply_section .apply_form').css('display','none')) {
$('#apply_section .apply_form').css('display','inline-block');
}else {$('#apply_section .apply_form').css('display','none');}
});
The problem is that the clicking method take the order just for one time, If I click on the image the form will appear, but after that if I need to hide it again and clicking the image doesn't work!

That's not how you check css property.
$('#apply_section .apply_image a').click(function() {
if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none'
$('#apply_section .apply_form').css('display', 'inline-block');
} else {
$('#apply_section .apply_form').css('display', 'none');
}
});

Another way using toggle:
$('#apply_section .apply_image a').click(function() {
var boolean = $('#apply_section .apply_form').css('display') == 'none';
$('#apply_section .apply_form').toggle(boolean)
});
According to Jquery toggle docs:
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

A better way to do something like that is using a toggle to a class:
CSS
.hide {
display:none;
}
jQuery
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggleClass('hide');
});

Simplify your code using toggle():
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggle();
});

How To Hide a div based on value in inner div

<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form">
<div class="jtable-input-field-container">
<div class="jtable-input-label">Type</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configType" type="text" name="configType">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Key</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configKey" type="text" name="configKey">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Value</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configValue" type="text" name="configValue">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Description</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-description" type="text" name="description">
</div>
</div>
I need to hide 1 div out of 4 div. I want to hide only div which has inner div as value 'Key'.
Please note that I am not allowed to changed HTML content. I can just write Jquery for it.

You can try this:
$( "div.jtable-input-label:contains('Key')" )
.closest( "div.jtable-input-field-container" )
.css( "display", "none" );

try this,
$("#jtable-edit-form .jtable-input-label:contains('Key')" ).parent().hide();
See this jsfiddle https://jsfiddle.net/cL4wsL3q/1/

Because IDs must be unique on document context, you should target specific parent element containing #Edit-configKey DIV instead:
$('#Edit-configKey').closest('.jtable-input-field-container').hide();

Try this code
$(document).ready(function(){
$( "div.jtable-input-label:contains('Key')" ).parent().hide();
});
Hope this will help you.

Onclick event issue after using the outerHTML

this is the code :
$(".adauga_incasare").click(function(){
var html = $(".incasari")[0].outerHTML;
$(html).insertAfter($(".incasari").last());
});
$(".del_incasare").click(function(){
alert("dsdasdasd");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div class="incasari">
<div class="data_incasare_container">
<label><b>Data</b></label>
<input class ="data_incasare" type="text" id="datepicker">
<label class ="data_incasare_hidden">12-06-2014</label>
</div>
<div class="suma_incasare_container" style="">
<label><b>Suma</b></label>
<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" alt="">
<label class ="suma_incasare_hidden">100</label>
</div>
<div class="coscos" style="">
<a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
<div style="clear:both;"></div>
<div class ="incasare_action">
<input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
+ Adauga incasare noua
<div class="toram">
<label style = 'cursor:default;'>Total incasat: <b>100 €</b></label>
<label style = 'cursor:default;'>Total ramas: <b>1012 €</b></label>
</div>
</div>
the outerHTML works fine, but when i "clone" the class incasari after that , when the onclick event doesnt work on the clone part. I have a delete button. In the first class "incasari" in works , but in the clone class it does not . Why ?

Use Event Delegation because your element is dynamically created after the click event was assigned. For example, to delegate to the document:
Demo
$(document).on("click", ".del_incasare", function(){
alert("dsdasdasd");
});
This means all clicks will be checked by the .del_incasare selector, and if it matches then the function will run, regardless of when the element was created.

The method you used to fire click event only works with the DOM elements that has been created during page load, DOM elements created dynamically would not be handled by this method.
For the elements created after page load or dynamically you have to use Event Delegation. For this use jQuery on method.
$(document).on("click", ".del_incasare", function(){
// do some cool stuff here.
});
You can use any parent element instead of document here, that was already in DOM during page load.