Select div not with classe [duplicate] - javascript

This question already has answers here:
jQuery If DIV Doesn't Have Class "x"
(7 answers)
Closed 8 years ago.
I have a lot of divs on my site.
<div class="slide bx-clone"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide bx-clone"></div>
<div class="slide bx-clone"></div>
<div class="slide bx-clone"></div>
Now I want to select the div with jquery. But i only want the divs with the classe slide. And not the divs with the classe slide bx-clone.
How can i make that select statement?

This should do the trick:
$('.slide:not(.bx-clone)');
That's jQuery's not selector.
Or, you could filter the elements afterwards, by using .not():
$('.slide').not('.bx-clone');

Try this :
$('.slide').not('.bx-clone')

Related

Button to flip all hover flip cards at once [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
What characters are valid for JavaScript variable names?
(12 answers)
Closed 3 months ago.
I am creating hover flip cards for an instructions manual, and I would like to create a button that would flip them all at once. To get the cards flipping, I only relied on CSS, but to make the button I need some javascript, which I have no idea how to use. Can anyone help me?
<script>
const flip-card = document.getElementByClassName("flip-card-inner")
flip-card.addEventListener("click",flipCard);
function flipCard() {
card.classList.toggle("flip-card-inner");
}
</script>
<body>
<button type="button" class="flipCard">Flip all</button>
<p/>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h5>Title</h5>
</div>
<div class="flip-card-back">
<ul style="font-size: 10pt;">
<li>Some text</li>
</ul>
</div>
</div>
</div>

Trying to understand the following HTML code [duplicate]

This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 4 months ago.
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap home">
<nav class="header row">
</nav>
<!-- Off Canvas Menu -->
<aside class="right-off-canvas-menu">
<!-- close the off-canvas menu -->
<!-- whatever you want goes here -->
<div class="close">
In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.
Please help me to understand above html code.
data-offcanvas is a non standard or custom attribute which in this case appears to have no value.
You can read more in this here:
https://www.w3schools.com/tags/att_data-.asp

Removing the whole div with JavaScript [duplicate]

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

How To Move One Dive After Another Div? [duplicate]

This question already has answers here:
How to move an element after another element using JS or jquery?
(3 answers)
Closed 6 years ago.
<div class="test1">
.........
</div>
<p>some text here</p>
<div class="test2">
</div>
I want to Move Div test1 after test2
Thanks
You can use Clone() function of jquery
var divCopy = $('.test1').clone();
$('.test2').append(divCopy);
$('.test1:first').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test1">
.........
</div>
<p>some text here</p>
<div class="test2">
</div>

Angular ng-switch with conditions [duplicate]

This question already has answers here:
AngularJS: ng-switch-when with an OR
(5 answers)
Closed 8 years ago.
I have ng-switch="field.type" for an element containing ng-switch-when but I'd like to have the switch on when it's more than just one field.type.
I would assume something like ng-switch-when="type1 || type2" would work, but it doesn't.
What's the correct way to do this?
You can do solve it by copying the same ng-switch-when element (ie. element with the same content/innerHTML) for every value.
Like this:
<div ng-controller="mainCtrl">
<div ng-switch="expression">
<div ng-switch-when="matchvalue1">Item 1</div>
<div ng-switch-when="matchvalue2">Item 1</div>
<div ng-switch-when="matchvalue3">Item 3</div>
<div ng-switch-default>default</div>
</div>
</div>
http://jsfiddle.net/JoeSham/HB7LU/9201/

Categories