how do I remove an element from html site once loaded? - javascript

if the code is as below -
<div class="test1">
<div class="bla1">
</div>
</div>
how do I remove the href link above using javascript once the window has loaded?


Like this - assuming you want to remove the first instance of the link in a div with class test1
window.addEventListener("load",function() {
document.querySelector(".test1 a").remove()
})
div.test1 { border:1px solid red }
<div class="test1">
<div class="bla1">Bla 1</div>
Link
</div>
<div class="test1">
<div class="bla2">Bla 2</div>
Link
</div>
<div class="test1">
<div class="bla3">Bla 3</div>
Link
</div>
Remove all of the links in divs with class test1
window.addEventListener("load",function() {
[...document.querySelectorAll(".test1 a")].forEach(link => link.remove()); // IE11 compatible forEach
// document.querySelectorAll(".test1 a").forEach(link => link.remove())
})
div.test1 { border:1px solid red }
<div class="test1">
<div class="bla1">Bla 1</div>
Link
</div>
<div class="test1">
<div class="bla2">Bla 2</div>
Link
</div>
<div class="test1">
<div class="bla3">Bla 3</div>
Link
</div>

Related

how to get a class name inside the Ext.select('.classname') and remove one of the divs from within-EXTJS

I am trying to check if a class exists inside this parent class:
var index = 1;
Ext.select(".test").elements[index];
here is the o/p from above:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="remove-child"></div>
</div>
</div>
now im trying to find which of the divs with class="div3" does not have a child with class="hidden" and I want to remove that div with class="remove-child" and replace it with another div, say <div class="new-child"></div>, so that o/p would be:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="new-child"></div>
</div>
</div>
is this possible? Thanks!

Use a not selector to match the child(ren) and replace:
Ext.select('.div3 > :not(.hidden)').replaceWith({
cls: 'new-child',
html: 'New'
});
Fiddle.

CSS How to keep a hovered element in place

I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.

Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>

How to make a div hide when having same set of classes?

I have two set of div containers with input tags with same classes to both.
only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.
Please check my div containers below. please advice how to proceed this
Ex:
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>

Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:
.frame-focus > .panel-set {
display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>

html
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
jquery
$(document).ready(function(){
$("input").click(function() {
$(this).siblings('.panel-set').hide();
});
});
Example jsfiddle

How to hide a parent div if an inner div has a certain class, with javascript

Ok so say I have many divs. Some of the divs, the children have one class, other divs the children have a different class.
I want to hide only the divs which have a child with a certain class.
For example,
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
Now above, let's say that I only want to hide the parent divs which have a child div with the class .childB
This can't be done with CSS as far as I know (CSS3 anyway), because CSS doesn't allow you to style the parent div, only a child div. And the parent .mainDiv divs (the ones I want to hide) are all exactly the same.
So that leaves javascript.
Using the example above, how can I hide all the .mainDiv divs which contain a child div with the class .childB?

HIDING PARENT ELEMENT based on its direct descendant
//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
elementToHideList[i].parentNode.style.display = "none";
HIDING PARENT ELEMENT based on its child element.
//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.
$('.classB').closest('.mainDiv').hide();

You can do this with pure javascript:
var elementsChildB = document.getElementsByClassName("childB")
for(var i = 0 ; i < elementsChildB.length ; i++){
elementsChildB[i].parentNode.style.display = "none" ;
}
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
Or with Jquery:
$(".childB").parent().hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>

Javascript Method
var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
childB[e].parentNode.style.display = "none";
}
JQuery Method
$('.childB').parent().hide();

Using jQuery you could use the following selector. This will hide all mainDiv containing childB but not mainDiv that contain other elements or childB without a mainDiv as its parent (in whichever level , by the use of closest - https://api.jquery.com/closest/ ) :
$(".childB").closest(".mainDiv").hide();
Fiddle:
$(function() {
$(".childB").closest(".mainDiv").hide();
});
.childB {
background-color: red;
border: 1px solid black;
height: 50px;
margin-left:20px;
}
.childA {
background-color: green;
border: 1px solid black;
height: 50px;
margin-left:10px;
}
.mainDiv {
background-color: yellow;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childB">
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childA">Don't hide
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childB">To be hidden
</div>
</div>
<div class="mainDiv">
This contains a child A which contains a child B: <br />
<div class="childA">It is a child A
<div class="childB">To be hidden
</div>
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="childB">Should not be hidden
</div>

Well, you can use .parent() method to select the parent node of specified child nodes, and use .hide() to hide the selected parent nodes.
$('.childB').each(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>

Using jQuery, $('.childA').parent().hide();

Grab all div of mainDiv class and loop for each can check children class has specific class !!
var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
main[i].style.display = "none";
}
}

how to show previous div of clicked div in angular.js

i have a html like this
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
</div>
I have controller like this
app.controller('firstcontroller',function($scope)
{
$scope.display=false;
});
my directive coding like this
app.directive('myDirective',function(scope, element, attrs)
{
return function()
{
element.bind('click',function()
{
element.prev().show();
//alert(element.prev().attr('class'));
// element.parent().find('.main').append('<div>Some text</div>')
});
}
});
here initially div will be hidden if div has class name fist , only div having class name second will be displayed . so when we click on click div we have to show only previous div of that clicked div..... how to show previous div of clicked div in angular.js ?

I get the feeling that the question is missing information. E.g. are the .submain divs hardcoded, or created by iteration?
If however this is indeed the case, the directive is redundant. Change the HTML as:
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display[0]">displayed</div>
<div class="second" ng-click="display[0] = !display[0]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[1]">displayed</div>
<div class="second" ng-click="display[1] = !display[1]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[2]">displayed</div>
<div class="second" ng-click="display[2] = !display[2]">click</div>
</div>
</div>
And the controller:
app.controller('firstcontroller',function($scope) {
$scope.display=[false, false, false];
});

Categories

Resources