I want to be able to remove a div at the click of a button, the div is a card in bootstrap
this is the div:
$("button").click(function () {
$(this).parent().closest('div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I want to delete this div when I click the button.
Thanks in advance.
There is a jquery parents() which will find the parent element by passing any selector it will find that element. So here in your example you have to pass class name .col-md-4 OR .card by that selector you can perform any action
$("button").click(function () {
$(this).parents(".col-md-4").hide();
});
.col-md-4{border:1px red solid
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
Use jQuery#parents method and give the selector which you want to hide.
If you want to remove the content instead of hide, use
For remove
$(this).parents('.col-md-4.col-xs-4').parent().empty();
For hide
$(this).parents('.col-md-4.col-xs-4').hide();
Code
$("button").click(function () {
$(this).parents('.col-md-4.col-xs-4').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix">
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
Here you go with a solution
$("button").click(function () {
$(this).closest('div[class="col-md-4 col-xs-4"]').slideUp("slow", function(){
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I've used jQuery closest method to get the div and slideUp instead of hide to get the animation.
After slideUp completes it will remove the div (it's a callback).
Hope this will help you.
parent only goes one level up. You should use closest:
$("button").click(function () {
$(this).closest('div.col-md-4.col-xs-4').remove();
});
$("button").click(function () {
$(this).parent('div.card').hide();
});
Related
I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.
I am trying to write a page with collapse function, but I can only achieve single div collapse by boostrap. How to write a function to collapse all div and change the button content like "Collapse all-" to "Expand all+"?
https://codesandbox.io/s/elated-poincare-skugzl
<div class="p-3 text-end">
<a class="text-primary" data-bs-toggle="collapse" href="#question">Collapse All-</a>
</div>
<a data-bs-toggle="collapse" href="#q11">
<div class="bg-light rounded position-relative mt-4">
<div class="container-fluid p-4 overflow-hidden">
<span class="d-inline-block fw-bold">1. What should I do ?</span>
<span class="float-end fw-bold">+</span>
<div class="collapse mt-3" id="q11">
<p class="mb-0">
Please help.
</p>
</div>
</div>
</div>
</a>
<a data-bs-toggle="collapse" href="#q12">
<div class="bg-light rounded position-relative mt-4">
<div class="container-fluid p-4 overflow-hidden">
<span class="d-inline-block fw-bold">2. What should I do?</span>
<span class="float-end fw-bold">+</span>
<div class="collapse mt-3" id="q12">
<p class="mb-0">
please help
</p>
</div>
</div>
</div>
</a>
Toggle the show class:
function changeVisibility(){
document.querySelectorAll(".collapse").forEach(div => div.classList.toggle("show"))
}
Code
I am having a carousel with products and I want to show a loading Spinner when each and every Add to Cart button is clicked. But the code I have only shows a spinner on the first button clicked. Others wont show afterwards. Please Help
The Carousel
<div class="carousel-multiple owl-carousel owl-theme">
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
<a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
</div>
</div>
</div>
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
<a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
</div>
</div>
</div>
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
<a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
</div>
</div>
</div>
</div>
The Javascript Code for showing spinner on button click
$(document).ready(function () {
$("#spinner-btn").click(function () {
// disable button
$(this).prop("disabled", false);
// add spinner to button
$(this).html(
'<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading'
);
});
});
ID attribut must be unique !
If you want to target more than one element, you need to use a class.
https://careerkarma.com/blog/css-class-vs-id-2/
$(document).ready(function () {
$(".spinner-btn").click(function () {
// disable button
$(this).prop("disabled", false);
// add spinner to button
$(this).html('<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-multiple owl-carousel owl-theme">
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
ADD TO CART
</div>
</div>
</div>
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
ADD TO CART
</div>
</div>
</div>
<div class='item'>
<div class="card product-card">
<div class="card-body">
<img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
<h2 class="title">Apple</h2>
<p class="text">1 kg</p>
<div class="price">$ 1.50</div>
ADD TO CART
</div>
</div>
</div>
</div>
You are using the same ID on all of them, this will cause you problems because an ID element must be unique and used in 1 place only.
Try giving them all a shared class, or change the a elements to a button element, and give it a certain type for example:
<button type="add-to-cart">Add To Cart</button>
$(document).ready(function () {
$("button[type='add-to-cart']").click(function () {
// disable button
$(this).prop("disabled", false);
// add spinner to button
$(this).html('<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading');
});
});
I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
I tried using nth child selector but it did not work. maybe the way I wrong or something
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
example: https://jsfiddle.net/03koh1w4/
You need to make a few changes (HTML and CSS)
HTML -> Don´t close your order list on all item
CSS -> Give your (odd and even) to your list, and then to your class
CSS
.link-source {
display:inline;
color:#fff;
}
li:nth-child(odd) .link-source {
background: green;
}
li:nth-child(even) .link-source {
background: red;
}
HTML
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
</ul>
DEMO HERE