I have a page which contain dynamic content.
<div id="content-1">
<div id="subcontent-1"></div>
<i id="delete-1"></i>
</div>
.
.
.
<div id="content-10">
<div id="subcontent-10"></div>
<i id="delete-10"></i>
</div>
How to select dynamic content with jQuery selectors and how to understand which content will be deleted I'm not sure and confused.
Need to understand which delete for clicked by user.
In your markup, it will be easier to select elements if you can add a class to them like
<div id="content-1" class="content">
<div id="subcontent-1"></div>
<i id="delete-1" class="delete">i</i>
</div>
then use the class selector to register the event handlers
$(document).on('click', '.content .delete', function(){
$(this).closest('.content').remove();
})
Event binding on dynamically created elements?
Related
How do I gain access to the respective sibling element of my button from the ngFor iteration on my collection?
Dom Element, I'm attempting to access this DOM element, so I can alter the sibling element div.popup class. As shown in the Codepen example linked at the bottom of the post.
I'm very new with angular, please advise.
<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>
Prior to the posting here, I read on the following articles but I couldn't understand completely or relate to it.
Pass a reference to DOM object with ng-click
how to get DOM element with ng-click
How to get the element html clicked in a ngFor to add a css class?
Overview of code
Component.html
<section class="ArticlesGrid">
<div *ngFor="let article of articles" class="windowsBox">
<article class="ui-titlebar">
<h4 class="ui-titletext">{{article.title}}</h4>
</article>
<div class="windowsScreen">
<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>
<div class="popup" role="alert">
<div class="popup-container">
Close
<p>{{article.content}}}</p>
</div>
</div>
</div>
<p class="windowsTech">
Technologies:
<span class="THtml"></span>
<span class="TCss"></span>
<span class="TJs"></span>
</p>
</div>
</section>
Component.ts
PopUp(event: Event) {
//console.log(this.viewBtn.nativeElement.nextElementSibling.classList.toggle("is-visible"));
console.log(event);
// this.viewBtn.nativeElement.
}
SandBox Mockup
https://stackblitz.com/edit/angular-collection-popup?file=src/app/app.component.html
Function to mirror
https://codepen.io/Gugiui/pen/vweXYR
Thanks for reading my question. I hope you can advise/guide me
add template reference variable on popup div -
<div class="popup" role="alert" #popupDiv>
pass it in button click function -
(click)="PopUp($event, popupDiv)"
change class in PopUp method using plain javascript -
PopUp(event: Event, element) {
element.classList.remove('popup');
element.classList.add('test');
console.log(element.classList);
}
I have a form, and some the fields are set inside 3 groups of collapsible divs, I wan't after the validation that if any field has errors the parent div receive a class to unfold it.
<div class="panel-group" id="fields_panel">
<div class="panel panel-primary">
<div id="basic_info_fields" class="panel-collapse collapse in"> <!-- add class "in" -->>
<div class="panel-body">
<div class="row clearfix">
<div class="col-md-12 m-b-0">
<div class="form-group">
<div class="form-line error"> <!-- if this div has "error" -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have two more panels with the same structure, eacho one with a couple of fields, I'm trying to find if any form-line has error and append to the panel-collapse parent the class in to unfold it.
Right now I have the following jquery code:
$(function () {
var elem = $('.panel').find('.form-line');
if (elem.hasClass('error')) {
elem.closest('.panel-collapse').addClass('in');
};
});
But it apply the in class to all panel-collapse.
What should I do to apply it only to the top level parent that have a child element with that class, and not to all parents?
Your hasClass won't work as elem is an array of jQuery objects - not just one.
Why do you need it - why not just include the class in your selector:
$('.panel').find('.form-line.error').closest('.panel-collapse').addClass('in');
This also stops you looping through elements in the array that doesn't have the class thus improving efficiency
Use following code:
$('.panel').find('.form-line.error').each(function(){
$(this).closest('.panel-collapse').addClass('in');
});
$(this) refers to the specified element which has the error class.
I am dynamically giving elements IDs with *ngFor like this:
<div *ngFor="let section of questionsBySubCat" class="col-md-12">
<div class="subcat-container">
<h4 class="sub-cat">{{ section?.subcategory }}</h4>
</div>
<div *ngFor="let question of section?.questions; let i = index" class="row">
<div class="col-md-11 col-xs-10">
<h5 (click)="toggleAnswer(question)" class="question">{{ question?.question }}</h5>
<div class="answer-div" id="ques-{{question?.subcategory.split(' ').join('')}}-{{question?.num}}">
<br> // DYNAMIC ID HERE ^^
<p [innerHtml]="question?.answer" class="answer-text"></p>
<hr>
<br>
</div>
</div>
</div>
</div>
When I check the elements in the console the IDs are created correctly. When I use jQuery to log out the inner html of the element it works perfectly but when I use jQuery to change the elements css (display to none) it does not work at all. Why is this?
Put your jQuery code for changing css elements in setTimeOut() function.
It is not working because you are trying to access dom element and modify their css before they gets created dynamically. So you should let your jQuery code(which change css element) in setTimeOut().
setTimeout(function () {
$('your dynamic dom element').addClass('in');
}, 1000);
Hope this helps.
I am trying to add a div dynamically based on a the text of the parent div.
My html is:
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>
So I want a div to be insert such that if YES, <div class="fa fa-check"></div> should be added right before the <strong> and if No <div class="fa fa-cross"></div> should be added.
Using the jQuery below i have managed to add a class to <div class="listing_detail col-md-4"> however i cant figure out how to add the div.
jQuery:
$('.listing_detail:contains("Yes")').closest('.listing_detail').addClass('yes');
Fiddle
Use .prepend():
$('.listing_detail:contains("Yes")').prepend('<div class="fa fa-check"></div>');
This would result in:
<div class="listing_detail col-md-4"><div class="fa fa-check"></div><strong>Living Room:</strong> Yes</div>
prepend() should do the work . DEMO
In the below example, if the .listing_detail div contains class yes , it is gonna prepend div check as its first child i.e in this case it will prepend before strong.
$('.listing_detail:contains("Yes")').prepend('<div class="fa fa-check"></div>');
Use the jQuery .prepend()
$('.listing_detail:contains("Yes")').closest('.listing_detail').addClass('yes').prepend('<div class="fa fa-check"><input type="checkbox"> Check me</div>');
Fiddle
EDIT: made a mistake with before/after
I have a page hierarchy like this:
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
....
So I have a bunch of these panels with nested panels inside, and I'm trying to create on on click handler for the delete buttons of the top level panels only (so the ones immediately inside panels that do not have an association id). The only different between the parent and child panels is that the child ones have the extra attribute "association-id".
So I can select the top level panels only like so:
$('.panel[attribute-id]:not([association-id]')
But if I try to get the delete buttons from from these like:
$('.panel[attribute-id]:not([association-id] .delete')
Obviously I'm still going to get the child buttons.
I can't modify the html in anyway, how could I go about doing this?
$(':not(.panel[attribute-id][association-id]) > .delete')
seems to do the trick.
jsfiddle
I've changed .panel-group to .panel to get it to work with the HTML provided.
Wrap them all in a div and assign that div a unique class. Then you can use jquery selector ".panel-group > .panel" to get only direct children of top level.
<div class="panel-group">
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
<div class="panel" attribute-id="11">
<button class="delete">
<div class="panel" attribute-id="12" association-id="120">
<button class="delete">
</div>
</div>
</div>
You can use the children method:
$('.panel-group[attribute-id]').children('button').first()