We Keep Coding

Can I check with jQuery if element has specific class and edit only this element?

if (jQuery("li.store .premise")[0]) {
jQuery(".address .arrow").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow"></span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span
class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>
Is there a way to check if an element contains specific class and if it does, then to edit only this or these elements.
I have a list of stores and I want if some of them contain specific class to remove the arrows.
I tried with this but it removes all elements with a class arrow and I want to remove the only storeеthat have the specific class which in this case is class="premise"

Closest using get parent element then find class for .arrow then remove method using removed.
$(".store .premise").closest(".address").find('.arrow').remove();

Once you have a collection of premises, use .closest to navigate to their ancestor address, from which you can get to the .arrows:
$('div.store .premise').closest('.address').find('.arrow').remove();
(assuming that the .store element in your actual code is a <li>, otherwise use div.store or just .store)
$('div.store .premise').closest('.address').find('.arrow').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow">arrow here</span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>

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>

Hiding an element through DOM traversal

What if it has few parents? (as in grandparents, great grandparents)
<div class="lvl1">
<div class="lvl1.1">
<div class="lvl1.2">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
<div>
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
JS
$(function(){
$(".btn-submit").click(function() {
$(this).parent(".lvl1").siblings(".lvl2").children(".b2").hide();
});
});
How to use .parent, .parents, .siblings, .children, .next, .prev to show and hide the div?

If I assume that you have that structure repeated and want to remove the one in the same copy as the .btn_submit that was clicked, we go up to the .lvl1 via closest, over to the .lvl2 via .nextAll().first() (or we could just use .next), and then .find the .b2 in there:
$(".btn-submit").click(function() {
$(this).closest(".lvl1").nextAll(".lvl2").first().find(".b2").hide();
});
Your code is very close, just two things that I had to change:
Instead of using .siblings(".lvl2"), which will find all of them, I used .nextAll(".lvl2").first() to just find the one immediately after "this" .lvl1.
I used find instead of children, because children will only go down one level (direct child), not search descendants
I also used closest(".lvl1") so that if you move the .btn_submit deeper into .lvl1, it will continue working.
Live Example:
$(function() {
$(".btn-submit").click(function() {
$(this)
.closest(".lvl1")
.nextAll(".lvl2")
.first()
.find(".b2")
.hide();
});
});
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

there is possible to disappear div directly using,
$(".b2").hide();
but if you want to use ".parent, .parents, .siblings, .children, .next, .prev",
$(".btn-submit").parent().siblings(".lvl2").children().children(".b2").hide();
need to you children() Two times... because .b2 is not directly child to .lvl2,
another best way to hide ".b2" is,
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
so your Ans is:
$(".btn-submit").click(function() {
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
});

.children selects the children and not descendants of the element. You just need to replace the .children with the .find method and your code will select the target element.

jQuery find id after loading

Here is my structure:
Person.html
...
<script src="../../js/site.js"></script>
...
<a id="findPersonById" href="javascript:void(0);" class="btn btn-primary">
Find person by id</a>
...
<div id="person-result">results div</div>
Site.js
$(document).ready(function () {
privateFunction();
});
...
$('#findPersonById').click(function () {
$("#person-result").load('/person/find #inside-container');
});
...
/person/find
<script src="../../js/site.js"></script>
...
<div class="container">
<div id="inside-container">
<br/>
<form id="personFindByIdForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">PERSON'S ID</span>
<input type="text" class="form-control" name="id"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Find</button>
</span>
</div>
</div>
</form>
<div id="find-result">res-div</div>
</div>
So, first of all I'm finding #findPersonById and loading /person/find #inside-container in the #person-result. It works. My next step was about to find two ids #personFindByIdForm and #find-result. I can't do it since document is already loaded if I'm right. How could I do this ?
And the second question - if I add any js code into the div that will be loaded into another div, will that js code run (why is it not running)?
Like:
$("#div-2").load('/any-url #div-1');
<div id='div-1'>
<script>console.log('Any JS')</script>
</div>
Thank you.

You can make sure the items are loaded this way:
$("#div-2").load('/any-url #div-1', function(){
//here all the items loaded will be accessible
});

Remove a div with it's child elements in jquery

I have a method from where I need to remove the current div with it's element on clink. But it's not doing anything. I have searched goggle for it and applied various thing but no result. Can anyone please help me on this please?!!! Here are my code below ::
my div where my elements and remove link are stated >>>
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a onclick="removeThisMember()">Remove</a>
</div>
</div>
my remove function >>>
function removeThisMember(){
$(this).closest('.pNorPpl').remove();
}

The context of this does not carry through when you use on* attributes. Instead you need to pass it:
<a onclick="removeThisMember(this)">Remove</a>
function removeThisMember(el) {
$(el).closest('.pNorPpl').remove();
}
Or you can attach your event via jQuery:
Remove
$('.pNorPpl').on('click', '.remove-link', function(e) {
e.preventDefault();
$(this).closest('.pNotPpl').remove();
});

Try with this solution:
http://jsbin.com/tuniyucuki/1
HTML
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a class="removeFromHere" >Remove</a>
</div>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.removeFromHere').click(function(){
$(this).closest('.pNorPpl').remove();
})
})