Remove all the elements outside of a container? - javascript

I'm trying to find a way to remove all the elements (div's) outside of a specific container.
For example:
I have an HTML container with a few div's inside of it like so:
<div id="container">
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
</div>
<div id="someID">
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
</div>
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
I basically need to remove all the elements with the class name baby that is outside of container. Some of the elements don't even have a container so I cannot target them using the parent or anything like that.
Is this possible at all?


You can use :not() or not() to avoid the element inside #container
$('.baby:not(#container .baby)').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div class="baby">1</div>
<div class="baby">1</div>
<div class="baby">1</div>
<div class="baby">1</div>
</div>
<div id="someID">
<div class="baby">2</div>
<div class="baby">2</div>
<div class="baby">2</div>
</div>
<div class="baby">3</div>
<div class="baby">3</div>
<div class="baby">3</div>
Using not()
$('.baby').not('#container .baby').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div class="baby">1</div>
<div class="baby">1</div>
<div class="baby">1</div>
<div class="baby">1</div>
</div>
<div id="someID">
<div class="baby">2</div>
<div class="baby">2</div>
<div class="baby">2</div>
</div>
<div class="baby">3</div>
<div class="baby">3</div>
<div class="baby">3</div>


//$('.baby:not(#container .baby)').remove();//select class baby not inside container using selector :not
$('.baby').not('#container .baby').remove();//select class baby not inside container using method .not()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="baby">1</div>
<div class="baby">2</div>
<div class="baby">3</div>
<div class="baby">4</div>
</div>
<div id="someID">
<div class="baby">5</div>
<div class="baby">6</div>
<div class="baby">7</div>
</div>
<div class="baby">8</div>
<div class="baby">9</div>
<div class="baby">0</div>


You can also use the container where all the children are located such as:
$('body').children().not('#container').remove();

Related

Find closest div inside another div

Sample:
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:
console.log($(this).parent().parent().closest('.element'));
What am I doing wrong?

In your HTML there is no closest element with the class element. You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element
closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.
$('.column_expand_list').on('click', function() {
console.log($(this).closest('.table_element').next('.element'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

I guess this is just a repetition od #Cloned and #AlwaysHelping's answers, but anyway, here it is:
$(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X this will not find a suitable "parent"</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X click here.</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div
Using .next() like this:
$(this).parent('div').next('.element').text()
Demo:
$('.column_expand_list').click(function() {
console.log($(this).parent('div').next('.element').text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 3</div>
</div>

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.

jQuery select x div inside div

I want to hide() the 2nd and 3rd div with class second inside div.first
<div class="first">
<div class="another"></div>
<div class="second"></div>
<div class="second"></div> // Hide this
<div class="second"></div> // Hide this
<div class="second"></div>
</div>
<div class="first">
<div class="another"></div>
<div class="second"></div>
<div class="second"></div> // Hide this
<div class="second"></div> // Hide this
<div class="second"></div>
</div>
How can I select that every 2nd and 3rd div inside first class
with jquery ?

Try using .each() , .slice()
$(".first").each(function() { $(".second", this).slice(1,3).hide() })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="first">
<div class="another"></div>
<div class="second">first</div>
<div class="second">second</div> // Hide this
<div class="second">third</div> // Hide this
<div class="second">fourth</div>
</div>
<div class="first">
<div class="another"></div>
<div class="second">first</div>
<div class="second">second</div> // Hide this
<div class="second">third</div> // Hide this
<div class="second">fourth</div>
</div>

You can use :lt and :gt selectors.
$('.second:gt(0):lt(2)', '.first').hide();
Fiddle

You can use nth-child for that
$('.second:nth-child(3), .second:nth-child(4)', '.first').hide();
$('.second:nth-child(3), .second:nth-child(4)', '.first').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
<div class="another">1</div>
<div class="second">2</div>
<div class="second">3</div> <!-- Hide this -->
<div class="second">4</div> <!-- Hide this -->
<div class="second">5</div>
</div>
<div class="first">
<div class="another">1</div>
<div class="second">2</div>
<div class="second">3</div> <!-- Hide this -->
<div class="second">4</div> <!-- Hide this -->
<div class="second">5</div>
</div>

How to get the id of each first element of a nexted div in JQuery

here is my HTML code
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>`
I am trying to get the id of each first element of the parent div
that is to get an
array=[computer, laptop, printer, cpu, scanner]
here is my jquery code but it's taking everything.
var a = $("div.content :nth-child(1)")find("*").toArray();
please I need some help thanks

there is a selector in jQuery which will return the first level of children: DEMO
var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
a.push($(this).attr('id'));
});
alert(a);

Those are children of the #parent element so you can iterate over that and create an array out of it using .map()
var array = $('#parent').children().map(function() {
return this.id;
}).get();
snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Categories

Resources