Remove elements from webpage in query - javascript

I have this code (Bootstrap and Jquery):
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.imgpo').click(function(e) {
var posX = $(this).position().left,
posY = $(this).position().top;
$('.coorX').html((e.pageX - posX - 10));
$('.coorY').html((e.pageY - posY - 10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1': val1,
'val2': val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values,
success: function(response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => {
ev.stopPropagation();
})
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
</div>
<input type="submit" value="Save" />
</form>
prview: http://serwer1356363.home.pl/pub/component/index2.html
In this webpage I have:
1. points on image points (id = point1 to point4),
2. objects (obiect1 to obiect4).
I have too removeMe with ID 1-4.
I would like that after clicking a div with the class removeMe, for example, ID = 2 - the page has been removed:
1. obiect2
2. point2
Could I ask you to write the code?
I would like to delete entire blocks of obiect2 and point2 together with what is inside (html content)
How to do it?


You can get the number from the id of .removeMe and use this in the selectors for point and abject to find the corresponding elements.
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
point1
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
point2
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
point3
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
point4
</div>
</div>
</div>

Related

jQuery slideToggle class with dynamically created id

I am trying to hide / show comment replies.
I tried a few methods but couldn't get class with dynamic ids.
My html structure is like this :
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-1" id="comment-2">
//level-2 parentOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-2" id="comment-3">
//level-3 parentOF-2
</div>
<div class="form-group border-bottom" id="comment-4">
//level-4 doesnt have child
</div>
</div>
I tried like in the following example with different variations.
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
var commet-id = $('comment-').val();
var parentOF = $('parentOF-').val();
$(this).text() == "show replies" ? $(this).text("show replies") : $(this).text("hide replies");
$(this).closest('parentOF-').nextUntil('parentOF-').slideToggle();
});
But couldn't make it work. Thanks for any help.

You could Hide At comment div's all class that contains parentOf- class ,
$("div[class*='parentOF-']").hide();
then in each button attach event that show child comment on click , otherwise hide child comment and all it's children using recuresive function described in the snippet :
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
Here a working snippet as I understand :
$(function($) {
$("div[class*='parentOF-']").hide();
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
let id = $(this).attr("id");
if( $(this).text() == "show replies" ) {
$(this).text("hide replies")
let $childComment = $(`.parentOF-${id}`)
$childComment.slideDown();
} else if($(this).text() === "hide replies") {
hideRecurssive(id);
$(this).text("show replies")
}
});
});
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
.hide {
color: red;
}
.unhide {
color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="display_comment" class="col-12">
<div class="form-group border-bottom " id="comment-6">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri, yabancı dili İnternet&amp;#39;teki içerik deryasını tam olarak anlamak için yeterli olmayan kullanıcılar tarafından tercih ediliyor. Bununla birlikte Google Çeviri, her zaman mükemmel t</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:38
<button type="button" class="btn btn-primary btn-xs reply" id="6">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="6" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-6" id="comment-7">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Translate aracı halihazırda 100&amp;#39;den fazla dil arasında tercüme yapıyor.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:56
<button type="button" class="btn btn-primary btn-xs reply" id="7">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="7" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-7" id="comment-8">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Translate çeviriler için yakın zamana kadar Avrupa Parlamentosu ve Birleşmiş Milletler gibi büyük kuruluşların verilerini kullanıyordu. Çeviriler ayrıca sözlük bilgileri ve kullanıcılar tarafın</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:19
<button type="button" class="btn btn-primary btn-xs reply" id="8">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="8" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-8" id="comment-11">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">rew rew ew wre</div>
</div>
<div class="col-12 sttime">2021-01-09 18:10:46
<button type="button" class="btn btn-primary btn-xs reply" id="11">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom " id="comment-9">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri nasıl kullanılır? Google Translate anlaşılır bir arayüze sahip ancak keşfedilecek birçok özelliği var.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:43
<button type="button" class="btn btn-primary btn-xs reply" id="9">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>

Updated as per request. This will allow you to show nested comments and hide them. If you hide a parent comment then all nested comments will be hidden.
N.B. I changed your parentOF- to childOF- because it didn't make sense. You can just change all incidences of the class name in the code below if you'd like to keep it.
All the code is fully commented.
// Add dynamic click event listener
$(document).on('click', '.show_reply', function(e) {
// Toggle button text
if ($(this).text() == "show replies") {
$(this).text("hide replies");
} else {
$(this).text("show replies");
}
// Get comment-id from parent element
commentID = $(this).parent().attr("id");
// Just get id
commentID = commentID.replace("comment-", "");
// Store element
el = $(".childOF-" + commentID);
// Check if element is visible
if (el.is(':visible')) {
// Check for nested comments if hiding
hideNested(commentID);
// Hide element
el.slideUp();
} else {
// Show element
el.slideDown();
}
});
function hideNested(nestedID) {
// Find element that is child of the one passed
nested = $(".childOF-" + nestedID)
// Check if nested comment exists
if (nested.length == 0) {
// Exit function if it does not
return;
}
// Hide comment
nested.slideUp();
// Update button text
nested.find("button.show_reply").text("show replies");
// Check for further nested comments
hideNested(nested.attr("id").replace("comment-", ""));
}
div[class^='childOF'],
div[class*=' childOF'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
<div class="form-group border-bottom childOF-1" id="comment-2">
//level-2 childOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-2" id="comment-3">
//level-3 childOF-2
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-3" id="comment-4">
//level-4 childOF-3
</div>
</div>
<div class="form-group border-bottom" id="comment-5">
//level-5 doesnt have child
</div>
</div>

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.

Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr

You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>

Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>

There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

How to hide database record on click of button using jquery

I have a view where I am fetching database records in form of bootstrap card. In the each card I have checkboxes which are associated with a database column.
On checking the checkboxes and clicking of the save button I want to hide the card with that record in which I enter that value
How can I achieve this? I tried with the class name of the card but it is hiding all the cards.
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
#model IEnumerable
<RoomTypeView>
<div class="row">
#foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room #Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button><br />
#Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
#if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
#if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
#if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="#item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
#if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="#item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
#Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
This $('.Resbook').hide(); is hiding all the cards. How to overcome this? How can I can use that rId to hide that particular card?

it is hiding all the cards
You need to ensure only the related card is hidden. The .insert button is within a .card so you can find the .card it's within using .closest and then use relative finds.
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
or
card.find('input[data-invchkid=' + rId + ']:checked')
As the .card is also .Resbook (<div class='card Resbook'>) you can use .Resbook instead of .card, eg:
var card = $(this).closest(".Resbook");
$(card).hide();
Giving:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
Example snippet showing use of .closest() using OPs structure:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
In the case where the button is not inside the hierarchy of the card to be used, they can be linked together via their data-rid= values.
Add the .data-rid to the .card so that they match:
<div class='card' data-rid='#item.RoomId'/>
then match the two with
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
Example snippet:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>

comment reply system with catching specific id value

hi guys I have a blog post page and comment and reply system. Everything works fine except one thing:
When I try to add a reply to a comment, I am always replying to the first comment. I think my fault is I can't reach the specific comment id when I click. Here is my html and ajax code:
HTML CODE
<div class="card" style=" margin-bottom:30px;">
<div class="card-header">
<a class="h3">#Model.Header</a>
<br />
<br />
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<p style="font-size:small">
<b>Kategori: </b> #Model.Category.CategoryName ,<b>Makale Sayısı :</b> #Model.Category.Articles.Count()
<b>Yorum Sayısı :</b> #Model.Comments.Count() <br />
<b>Yayımlanma Tarihi: </b> #String.Format("{0: d MMMM yyyy}", Model.Date) ,<b>Etiketler:</b><i class="fa fa-tags"></i> #Model.Tags.Count()
</p>
<p style="font-size:small;">
<img class="rounded-circle img-fluid" style="width:100px;height:100px;" src="#Model.User.Photo" alt="#Model.User.FullName" />
Posted by:
#Model.User.UserName
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<img id="articlephoto" style="width:100%; height:350px" class="rounded float-left" src="#Model.Photo" alt="Card image cap">
</div>
</div>
<div class="row" style="margin-top:20px">
<div class="col-md-12 col-xs-12 col-xl-12">
<p>#Html.Raw(Model.Paragraph)</p>
<p style="font-size:small">
<b>Etiketler:</b>
#foreach (var item in Model.Tags)
{
<span class="tag">#item.TagName,</span>
}
</p>
</div>
</div>
</div>
</div>
<h4>Comments</h4>
<hr />
#foreach (var item in Model.Comments.ToList())
{
<!-- Single Comment -->
<div class="media mb-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body" style="width:400px;">
<h5 class="mt-0">#item.User.UserName</h5>
<p style="word-break:break-all">
#item.Paragraph
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteComment/#item.CommentId">
Delete
</a>
<a class="btn btn-warning replybutton" href="#replyform">
Reply
</a>
}
</p>
<p style="font-size:small"><b>Yorum Tarihi:</b>#String.Format("{0: d MMMM yyyy}", item.Date)</p>
<span id="astar" class=""> #item.CommentId</span>
#foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
{
<div class="media mt-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body">
<h5 class="mt-0">#reply.User.UserName</h5>
<p>#reply.Paragraph</p>
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteReply/#reply.ReplyCommentId">
Sil
</a>
}
</div>
</div>
}
</div>
</div>
<hr />
}
#if (Session["UserId"] != null)
{
<!-- Comments Form -->
<div id="commentform" class="card my-4">
<h5 class="card-header">Yorum Yap:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea id="comment" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary">Yorum Yap</button>
</form>
</div>
</div>
<div id="replyform" class="card my-4 d-none">
<h5 class="card-header">Cevap Yaz:</h5>
<div class="card-body">
<div class="form-group">
<textarea id="replytext" name="replytext" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="reply" name="reply" class="btn btn-primary">Cevap Yaz</button>
</div>
</div>
}
else
{
<div class="row" style="margin-bottom:30px;">
<div class="col-md-6">
<h3 class="alert- alert-heading">Yorum Yapabilmek İçin Üye Girişi Yapmalısınız.</h3>
</div>
</div>
}
AND my javascript ajax code
<script type="text/javascript">
$(document).ready(function () {
$("#reply").click(function (e) {
var r_comment = $("#replytext").val();
var r_commentid = parseInt($("#astar").html());
$.ajax({
url: '/Home/ReplyComment/',
data: { replycomment: r_comment, articleid:#Model.ArticleId, commentid: r_commentid },
type: 'POST',
dataType: 'json',
success: function (data) {
alert("Cevap gönderildi");
window.location.reload();
}
});
});
})
</script>
My problem is that I can't catch the specific comment id when I click the reply button. I am getting the comment id from <span id="astar" class=""> #item.CommentId</span>

"When I try to add a reply to a comment, I am always replying to the first comment. " - it's because all your comments have the same ID and jQuery selects the first matching element.
All comments need to have a unique ID. I don't know what language that loop is in but you need to increment the ID. So astar-1, astar-2, astar-3 etc...
Example;
$(document).ready(function(){
var valueBox = document.getElementById('value-box');
$('.reply').on('click', function(){
var comment = $(this).prev().attr('id');
valueBox.innerHTML += '<br />Reply to comment: ' + comment;
console.log(comment);
});
});
.comment::after {
display: table;
content: ' ';
clear: both;
}
span {
display: block;
float: left;
width: 45%;
}
.reply {
display: block;
float: right;
width: 45%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment">
<span id="comment-1">Yorum 1</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-2">Yorum 2</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-3">Yorum 3</span>
<div class="reply">Cevapla</div>
</div>
<div id="value-box">
</div>

Showing details on button click in jquery

I've three items in my page, each of them has its own button.
What I am trying to do is whenever a button is clicked, the details of the selected buttons should be shown inside .
I am completely new to this kind of programming situation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name">
Item 1
</div>
<div class="item_price">
100
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add1">ADD</button>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name">
Item 2
</div>
<div class="item_price">
180
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add2">ADD</button>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name">
Item 3
</div>
<div class="item_price">
280
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add3">ADD</button>
</div>
</div>
</div>
<aside>
<div>Seleted items and there details should be shown here</div>
</aside>

Here is a reusable code that you can use to slove your issue , it also calculate the price , with a litle bit of styling it will look better :)
item1={
button:$(".addwork1"),
name:$(".item_name1"),
price:$(".item_price1"),
quantity:$(".quantity1 >input"),
result:$(".result1")
}
item2={
button:$(".addwork2"),
name:$(".item_name2"),
price:$(".item_price2"),
quantity:$(".quantity2 >input"),
result:$(".result2")
}
item3={
button:$(".addwork3"),
name:$(".item_name3"),
price:$(".item_price3"),
quantity:$(".quantity3 >input"),
result:$(".result3")
}
function getresult(data){
data.button.on("click",()=>{
data.result.text("The :" + data.name.text() +
" The total price: "+ (data.price.text() * data.quantity.val()) +
" Quantity: " + data.quantity.val() )
})
}
getresult(item1);
getresult(item2);
getresult(item3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name1">
Item 1
</div>
<div class="item_price1">
100
</div>
<div class="quantity1">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork1" id="add1">ADD</button>
<div class="result1"></div>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name2">
Item 2
</div>
<div class="item_price2">
180
</div>
<div class="quantity2">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork2" id="add2">ADD</button>
<div class="result2"></div>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name3">
Item 3
</div>
<div class="item_price3">
280
</div>
<div class="quantity3">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork3" id="add3">ADD</button>
<div class="result3"></div>
</div>
</div>
</div>

Categories