We Keep Coding

Manipulate the card class with css and Html

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.

jquery - parent element not being removed [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
The code:
$('.del').click(function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
$('#order-items').append(Data.order_item_clone)
}
})
What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
</div>
<div class="col-md-9 obox-purity obox">
</div>
<div class="col-md-4 obox-info obox-price obox">
</div>
<div class="col-md-4 obox-info obox-weight obox">
</div>
<div class="col-md-4 obox-info obox-total-price obox">
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance
Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)

$(document).on('click','.del', function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
alert("append now");
// $('#order-items').append(Data.order_item_clone)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
alpha
</div>
<div class="col-md-9 obox-purity obox">
beta
</div>
<div class="col-md-4 obox-info obox-price obox">
gamma
</div>
<div class="col-md-4 obox-info obox-weight obox">
yellow
</div>
<div class="col-md-4 obox-info obox-total-price obox">
blue
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.
$(document).on('click','.del', function(e){

Search for text inside div and all his childs

I would like to hide an entire div when there isn't the text i'm writing inside a input form.
For now i'm able to search inside all childs div and hide every child div if there isn't the text.
But i have a problem right now, example:
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome">
<b>Nome: </b> Davide
</div>
<div class="col-4 regione">
<b>Regione: </b> Reggio
</div>
<div class="col-4 citta">
<b>Città: </b>Citta "
</div>
</div>
<div class="row">
<div class="col-4 dataNascita">
<b>Data di nascita: </b>02-02-1992
</div>
<div class="col-4 coaching">
<b>Coaching online: </b>Sì
</div>
<div class="col-4 sesso">
<b>Sesso: </b>Maschio
</div>
</div>
<div class="row border-bottom">
<div class="col-6 blurry-text cellulare">
<b>Cellulare: </b> 1231231231
</div>
<div class="col-6 blurry-text email">
<b>Email: </b>asdaklsnd#gmail.com
</div>
</div>
<div class="row descriptionText">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'>
<button type='button'>Profilo</button>
</div>
</div>
</div>
if i search Davide all the others childs of the .infos div will be hidden since they doesn't contain the text, but i would like to keep them visible if there is another child that actually contain the text.
I've created an example here for testing : https://jsfiddle.net/hj9r2L4u/6/
I would like to have the possibility to input more words for the search bar, image having 2 users with name Davide, but with different city, i would like to input something like
Da City2
With "Da" i actually show both div, then with City2 i hide the div that doesn't have the text in it.
The code i'm actually using is:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery(".information").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

You could wrap the rows and target this as the containing element, see the snippet below:-
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery('.row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container w-100 h-100">
<input id="searchPt">
<div id="goToProfile">
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="rowWrap">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Davide </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Citta "</div>
</div>
<div class="row">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
<div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
</div>
<div>
<div class="rowWrap">
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Simone </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Emilia</div>
</div>
<div class="row\">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>No</div>
<div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
</div>
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
</div>
</div>

For multiple criteria, do a split and test each value with some short-circuit logic:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase().split();
jQuery(".information").filter(function() {
for(var i=0; i<value.length; i++){
if($(this).text().toLowerCase().indexOf(value[i]) === -1) {
$(this).toggle(false)
return false;
}
}
$(this).toggle(true);
return true
});
});

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

How to fadeIn and fadeOut individual Div elements created with foreach?

I have a foreach loop and this creates multiple div elements.
I added an onClick event when user clicks on the div it is doing fadeIn or fadeOut.
The problem is, that all of the div's obvouisly have same id and when I click on one of the div's it is fade in and fade out only the first div element.
I don't really know how to fade in and fade out them individually.
I have added my code in Fiddle
function showItems() {
var x = document.getElementById('showItemDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>

You should not use same id for multiple elements. Id for each element should always be unique. If you use same id the selector returns only the first element with matching id.
You should use class with same name.
For each element clicked you can find its parent and for that you can find a child with required class and toggle its visibility.
function showItems(ev) {
var x = $(ev.target).parents('.row.rounded-top').find('.showItemDiv');
$(x).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>