jquery - parent element not being removed [duplicate] - javascript

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){

Related

jQuery - How to make element not execute onclick function from parent?

In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?
<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
<div>
<button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Thank you in advance!

You can do that by calling event.stopPropagation(); in the button.
<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
Read more about it from Here
But I would suggest a cleaner solution,
Separate the card body from the card footer where the button exist.
<div class="card card-body item">
<div onclick="$('#extra-info').slideToggle();">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
</div>
</div>
<div>
<button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>

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

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>

Bootstrap grid columns not stacking before content overlaps

I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example

Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).

selector not working after append inside the .on() click event [duplicate]

This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
class selectors that are produced on the fly with my jquery functions are not working.
here is my jquery:
$(".add-category").on("click",function () {
// var id = $('#row-panel #col-panel').length.toString();
var id2 = ($('#parent-row #child-row').length + 1).toString();
$('#parent-row').append('<div class="row p-10" id="child-row">\
<div class="col-lg-12">\
<div class="panel panel-default panel-grey">\
<div class="panel-body">\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category Name</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category URL</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
');
});
$(".remove-category").on("click",function () {
if ($('#parent-row #child-row').length == 1) {
alert("You cannot remove the last form!");
return false;
}
$("#parent-row #child-row:last-child").remove();
});
and here is the mark-up
<div class="panel-body" id="parent-row">
<div class="row p-10">
<div class="col-lg-4">
<label>1 Category</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-lg-offset-6 col-lg-4">
<label>Add Sub Panel</label>
</div>
<div class="col-lg-2">
<a href="#" id="add-category" class="add-category">
<i class="fa fa-plus"></i>
</a>
<a href="#" id="remove-category" class="remove-category">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="row p-10" id="child-row">
<div class="col-lg-12">
<div class="panel panel-default panel-grey">
<div class="panel-body">
<div class="row p-10">
<div class="col-lg-4" >
<label>Category Name</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
<div class="row p-10">
<div class="col-lg-4" >
<label>Category URL</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the div that has an id parent-row is inside a dynamic div that is produced on the fly.
here is the jsfiddle: http://jsfiddle.net/fn51hrgv/2/
EDIT:
here is the latest code now and its working perfectly based on the behavior that i want it to be. http://jsfiddle.net/fn51hrgv/4/

try something like this:
$(".panel-body").on("click", ".remove-category",function () {

Categories