We Keep Coding

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>

How to remove div elements within specific div id

I want to remove all div elements with class facebook, twitter, LinkedIn, googlePlus who has parent id show-share-count
How to do this?
$("div").remove(".facebook");
$("div").remove(".twitter");
$("div").remove(".linkedIn");
$("div").remove(".googlePlus");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>

you can do this just only one line in script section.
<script>
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus").remove();
</script>

Just use following script for this
$('#show-share-count .facebook, #show-share-count .twitter, #show-share-count .linkedIn, #show-share-count .googlePlus, #show-share-count .share-count').remove();
or you can use .children()..
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove();

Do like this .children() .They will find the children element of the show-share-count
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>

This is how you can do it:
$("button").click(function() {
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus, .share-count").remove();
});
Here is the JSFiddle demo

You can try to use .empty from Jquery if you want to empty the whole div
https://api.jquery.com/empty/
or
$("#show-share-count .facebook").remove()
if you want to remove a specific div

You can use below also:
$('#show-share-count .facebook,.twitter,.linkedIn,.googlePlus,.share-count').remove();

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

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

Insert after parent of element

What sort of selector would be I need in order to insert after the parent (divouter) of the test3 class in the example below? Thanks.
<div class='divouter'>
<div class='divinner'>
<input class=test1></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test2></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test3></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test4></input>
</div>
</div>

You could use the $.after() method:
$(".test3").closest(".divouter").after("<div>Foo</div>");
Or the $.insertAfter() method:
$("<div>Foo</div>").insertAfter( $(".test3").closest(".divouter") );

.divouter:parent

I think you want the "after()" method:
$('input.test3').focus(function() {
$(this).closest('div.divouter').after('<div>Hi!</div>');
});