This question already has answers here:
Remove element by id
(19 answers)
Remove parent div by class name - jquery
(5 answers)
Closed 6 years ago.
Before you mark this as a duplicate, this is how my question is different.
Due to the lack of content actually on google, all that I can find is
removing the parent ID, I don't think that applies as the parent ID
would only remove panel-body, then leave panel-heading and the panel
div there.
I wanted to ask a quick question that I couldn't find any help with online. I have a bootstrap panel, which has two div's insdie of it, one for the panel-header and one for the panel-body. Inside the panel-body div I have a btn btn-success button that I want to remove the whole panel on click.
<div id="draggable" class="habbo-notification panel panel-default">
<div class="panel-heading">
Panel Header
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<font color="#B00049">
<h1 style="font-size:144px;margin-top:0;margin-left:14px;"><i class="fa fa-globe fa-6" aria-hidden="true"></i><h1>
</font>
</div>
<div class="col-md-8">
<p>
Some content here
</p>
<br>
<div class="btn btn-success" onclick="" style="width:100%">Close this</div>
</div>
</div>
</div>
</div>
</div>
In javascript or jquery (don't mind which one), how could I remove the entire div onclick of the button, without knowing the ID or class, or having any access to the panel div at all. I declare the panel-body's content somewhere other than the place where I declare the panel and it's two divs panel-body and panel-header.
I want to remove the whole panel div that the button is assigned to, on click?
<div class="btn btn-success" onclick="" style="width:100%">Close this</div>
Can anyone help?
The jQuery method is this one-liner.
$('.btn-success').on('click', function(){
$(this).closest('div.panel').remove();
});
The .closest() function looks for the nearest parent matching the supplied selector. In this case, it checks each parent of this until it sees div.panel.
You could drop this in your onclick="", though onevent attributes are deprecated in HTML. Standards expect events to be set within the Javascript.
I don't really get why you can't use the class(es) of the panel div like .panel, for example:
$(".btn").click(function(){
$(".panel").css("display","none");
});
But I think this would technically also work:
$(".btn").click(function(){
$(this).parent().parent().css("display","none");
});
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 website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I am wondering what the best practice would be to manipulate certain elements in an html page using jquery. As it stands now, I have a panel, with an embedded form which includes an input box, checkbox, submit/reset/test buttons. Right now I have each of these elements assigned an id so I can take the appropriate actions as each element is changed/selected. However, I feel as if my code is becoming quite messy and unreadable by assigning and managing each element by id. I know that it is efficient for the browsers to select by id, but is it better to simply give the panel/form an ID, and then call different selectors inside of the panel/form? Are there any suggestions for selecting some of the elements I have assigned IDs below? (The ones I am modifying..etc). Thanks!
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default" id="sample_panel">
<div class="panel-heading">
Heading
</div>
<div class="panel-body">
<form role="form" id="form1">
<div class="form-group">
<h4>Subheading</h4>
<div class="form-group input-group">
<span class="input-group-addon" id="input_addon">some_text</span>
<input type="text" id="input1" class="form-control" placeholder="Enter text">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<span class="help-block">
<input type="checkbox" id="cb1" >some_text
</span>
</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<button type="reset" class="btn id="reset_btn">Reset</button>
<button type="button" class="btn" id="test_btn">Test</button>
<i id="some_image"></i>
</form>
</div>
<div class="panel-footer" id="footer"></div>
</div>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
Remember that IDs are unique identifiers, and for that reason should have more specific names. I would use them only when they are actually necessary, and when a class wouldn't be a better way to identify them.
Pile on the classes, but use IDs a bit more sparingly. I struggled with this as well when writing my first MVC app. Good luck!
Don't forget there is a code review site on StackOverflow as well.
I give id's to major elements in the page that contain subsets of the page, and also important and unique elements that I would want direct access to. I don't give an id to each and every list item, link or div because it clutters the code and it's a potential maintenance nightmare. You won't select most elements of the page, and you'll often access multiple elements at the same time - classes are vastly more useful for this.
So while you are correct that accessing elements by id is very quick and efficient, the selector system is powerful and useful because you can select elements in a variety of ways. Take advantage of those other selection methods too, you'll get a lot more done with jQuery.
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)