How to hide database record on click of button using jquery

Question

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) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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?

You need to find the right .Resbook element. Without seeing your HTML we can't help you, so if you'd lik a specific solution to the problem please edit your question to include it — Rory McCrossan
– Rory McCrossan, Commented Jan 18, 2019 at 11:23

fdomn-m · Accepted Answer · 2019-01-18 12:16:53Z

1

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>

edited Jan 18, 2019 at 12:16

answered Jan 18, 2019 at 11:31

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fdomn-m Over a year ago

Ok - just noticed your .card and .Resbook are on the same node, updated

fdomn-m Over a year ago

Can you be more specific as to what's not working? Do you need a working snippet to show it working so that you can adapt it to your scenario?

kunals Over a year ago

in my view each card is associated with some id so i want on click of that insert button based on that id which is showing the record on the card i want to hide that card based on the id

fdomn-m Over a year ago

Your HTML shows the insert button inside the card - what you've described would have the button outside the card. It's easy enough with $("[data-rid=index]").closest(".card");

fdomn-m Over a year ago

Added a snippet using $("[data-rid=

Collectives™ on Stack Overflow

How to hide database record on click of button using jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related