I have a main <div> with many other divs inside like this:
[HTML]
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
I want to remove the div with class name "deleteMe", i tried to remove it by using ,find() method from jquery:
$('.container').find('.row').find('.col').find('deleteMe').remove();
or
$('.container').find('.row').find('.col').removeClass('.deleteMe');
But didn't work, what is the best way to remove it?
here is the fiddle link test this exemple:
fiddle
//$('.container').find('.row').find('.col').find('deleteMe').remove();
$('.container').find('.row').find('.col').removeClass('.deleteMe');
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.deleteMe {
border: solid 1px #6c757d;
padding: 10px;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="deleteMe">
delete me
</div>
</div>
</div>
</div>
You do not need jquery for the job, see the following code snippet ( The setTimeout wrapper delays the deletion by 1s and only serves to see what is happening.
setTimeout ( () => {
document.querySelector(".deleteMe").remove();
}, 1000);
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
Given your original code, you might want the selector to be more specific:
document.querySelector(".container > .row > .col > .deleteMe").remove(); // Adjacent sub-selectors reference elements in a parent/child relation
document.querySelector(".container .row .col .deleteMe").remove(); // The elements are in a ancestor/descendant relation, not necessarily child/parent
Try this
$(".container .deleteMe").remove();
below line will do
$( ".container .row .col .deleteMe" ).remove();
There is a little typo in your code: a . is missing before deleteMe.
$('.container').find('.row').find('.col').find('.deleteMe').remove();
correctly.
Another thing: removeClass don't remove an element with the specified class; It removes the specified class from the element.
Related
I'm trying to insert a wrapper around two divs, one with a dynamically generated ID. The div with the random ID is dynamically generated. No matter what I try, the wrapper is getting inserted after the target div though.
Before wrapper
<div id="search">Search</div>
<div id="234234">Unknown</div>
<div id="list">List</div>
After wrapper
<div id="search">Search</div>
<div id="wrapper">
<div id="234234">Unknown</div>
<div id="list">List</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search">Search</div>
<div id="wrapper">
<div id="234234">Unknown</div>
<div id="list">List</div>
</div>
EDIT
I have decided to use CSS to reposition the elements so that I no longer need the wrapper.
Simply wrap the children!
$("#wrapper").children().wrapAll("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="123456">has whatever ID</div>
<div id="list">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Or, to target elements that actually have any ID attribute use the "[id]" selector:
$("#wrapper").children("[id]").wrapAll("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="list123456">has id</div>
<div id="list">has id</div>
<div>Foo bar</div>
<div id="list234">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Before Edit:
Use the :not([id]) or / and [id=""] selectors if you want to target "no ID attribute" / or / "empty ID attribute" respectively:
$("#wrapper").children("div:not([id]), div[id='']").wrap("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="">has no id</div>
<div>has no attribute id</div>
<div id="list">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
If you do not know the element id, you can still use a class attribute to access it. Give the element with the random id (and any other elements you want to move) a class attribute so you can access via JavaScript and manipulate the DOM. You can do it simply with no jQuery, like this:
// Create the `div.wrapper` element
const wrapperEl = document.createElement('div');
wrapperEl.classList.add('wrapper');
// Create a reference to each element you want to make a child of `div.wrapper`
const childEls = document.querySelectorAll('.wrapped');
// Move the elements from `body` to `div.wrapper` parent
wrapperEl.replaceChildren(...childEls);
// Append the `div.wrapper` to the body element
const bodyEl = document.querySelector('body')
bodyEl.appendChild(wrapperEl);
console.log(wrapperEl.outerHTML);
<div id="search">Search</div>
<div id="234234" class="wrapped">Unknown</div>
<div id="list" class="wrapped">List</div>
I've logged the wrapperEl HTML in the console, but you can also inspect the HTML in your dev tools "Elements" tab to see the wrapper.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/replaceChildren#transferring_nodes_between_parents
I've had a look at related answers but none are what I am looking for... I think. Apologies if I am duplicating a question.
This HTML is used many times on a page, within a product box and is displayed on a product category page.
<div class"all-buttons-container">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2 **hidden**">text</a>
</div>
</div>
In this (much simplified) HTML I have a container which houses 2 siblings.
- Each sibling contains an anchor.
The button containers are always visible.
Sometimes, the .button2 anchor also has the bootstrap class of hidden so the anchor is no longer displayed. This is done in each of the product boxes depending on the need to have the second button for that product. I am not in control of this.
When the .button2 anchor has the hidden class I need to add some margin-top to button1-container to vertically center it
I was going to use pure style (flexbox) but it wasn't achieving what I needed.
I would like to run a little jQuery or pure JS every time the page finishes loading which adds some the top margin, if required, on each instance of this HTML. I don't like having to do this but will need to if I cannot find another simple way of controlling it.
Any thoughts... solutions... perfect solutions etc?
Thanks in advance!
cheers
wayjo
I suppose I've fully understood your question.
You can achieve this without JS, in a cleaner any.
Why not make a custom class of button2-hidden and attach it to all-buttons-container?
<div class"all-buttons-container button2-hidden">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2">text</a>
</div>
</div>
Then you have this CSS:
.button2-hidden .button2-container{
display: none; // or visibility -- whatever you want
}
.button2-hidden .button1-container{
margin-top: 1rem;
}
If you can add a div to contain the buttons, than you can use the snippet below:
.all-buttons-container{
display: flex; /* important part */
align-items: center; /* important part */
padding: 10px;
background-color: grey;
width: 200px;
border: 2px solid #fff;
height: 150px;
}
.hidden {
display: none!important;
}
.all-buttons-container > div a{
display: inline-block;
background-color: blue;
padding: 7px;
margin: 7px;
color: #fff;
}
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2 hidden">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1 hidden">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
I'm getting in trouble when I try to only REMOVE a class when I click a <a> tag. Adding class works perfectly, but removeClass() doesn't.
I have on my html:
<div class="row">
<div class="col-sm-2">
<h4>Ambiente</h4>
<ul>
<li><a>Baño</a></li>
<li><a id="ambienteCocina">Cocina</a></li>
<li><a>Dormitorio</li>
<li><a>Jardin</li>
<li><a>Living</li>
</ul>
</div>
<div class="col-sm-10 " style="border-left: 1px solid black">
<div id="contenedorOpcionesBano" class="opcionesAmbiente opcionesAmbienteActivo">
</div>
</div>
And then it works:
$(document).on('click', '#ambienteCocina', function(e){
$("#contenedorOpcionesBano").addClass("opcionesAmbienteActivo");
});
But it doesn't!
$(document).on('click', '#ambienteCocina', function(e){
$("#contenedorOpcionesBano").removeClass("opcionesAmbienteActivo");
});
Any idea?
EDIT::
I also tried this way, which still is not working
html modified:
<li><a id="ambienteCocina" onclick="cambiarAmbiente()">Cocina</a></li>
.JS Modified:
function cambiarAmbiente() {
$("#contenedorOpcionesBaño").removeClass("opcionesAmbienteActivo");
console.log("CHanged");
}
However, the log on console is displayed!
The problem was on my .css file,
I had those styles:
.opcionesAmbiente {
display: none;
}
.opcionesAmbiente .opcionesAmbienteActivo {
display: block;
}
And it means that .opcionesAmbienteActive must be child of .opcionesAmbiente.
So it was fixed by this way:
.opcionesAmbiente {
display: none;
}
.opcionesAmbiente.opcionesAmbienteActivo {
display: block;
}
What refers to an element which has bot .opcionesAmbiente AND .opcionesAmbienteActivo
in this snippet you can verify that the code is working.
maybe you can post your css
$(document).on('click', '#ambienteCocina', function(e){
$("#contenedorOpcionesBano").removeClass("opcionesAmbienteActivo");
});
.opcionesAmbienteActivo{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-2">
<h4>Ambiente</h4>
<ul>
<li><a>Baño</a></li>
<li><a id="ambienteCocina">Cocina</a></li>
<li><a>Dormitorio</a></li>
<li><a>Jardin</a></li>
<li><a>Living</a></li>
</ul>
</div>
<div class="col-sm-10 " style="border-left: 1px solid black">
<div id="contenedorOpcionesBano" class="opcionesAmbiente opcionesAmbienteActivo">
opcionesAmbienteActivo
</div>
</div>
</div>
just as an observation, in the list, the last 3 <a> are not closed
If you want to add or remove the class I recommend you use jQuery toggleClass. that allow Add or remove classes depending on either the class's presence
you can try:
$(document).on('click', '#ambienteCocina', function(e){
$("#contenedorOpcionesBano").toggleClass("opcionesAmbienteActivo");
});
or
Use off before using on
I'm looking for a help with a small things to do on my CMS website.
I would like to know, if it's possible, how to to remove or hide styles from one div one a website while another div is active and only when this 2nd div is inside the first one.
I'm using easytabs jQuery plugin and easytabs html code is inserted in tinymce WYSIWYG HTML source editor, while <div class="block"></div> is generated from CMS, because it's a wrapper of content module.
Let me show you my code so maybe you can understand more what I want to do:
<div class="block">
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div id="tabs1-html">
<h2>HTML Markup for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-js">
<h2>JS for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-css">
<h2>CSS Styles for these tabs</h2>
<!-- content -->
</div>
</div>
</div>
<div class="block">
<div class="test">
</div>
</div>
Okay, so CMS is adding <div class="block"></div> with a styles
(thats are the styles):
#main .block {
border: 2px solid #e0e0e0;
padding: 24px 28px 24px 26px;
margin: 0 0 8px;
background: #ffffff;
text-align: justify;
overflow: auto;
}
And here comes the problem. I would like to remove or hide styles from this <div class="block"></div> element only while I have <div id="tab-container" class="tab-container"></div> inside this div <div class="block"></div>.
And I need to keep all the styles for <div class="block"></div> when I have other divs inside it.
Is it doable with some jQuery or JS ? Or it's not possible ?
Thanks in advance.
You can do this with the has() function within jQuery. You're going to have to reset or change each of the CSS values
$(document).ready(function() {
$('.block').has('#tab-container.tab-container').css('border', '0');
});
.block {
border: 2px solid red;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="some_tag">
Text
</div>
</div>
<div class="block">
<div id="tab-container" class="tab-container">Some more text</div>
</div>
You can do an array of CSS values as well if there is more than one that needs to be changed like so:
.css({ "border": "0", "background": "blue"})
Insteed of resetting or overwritte all block classes maybe it would be much easier to add:
$(document).ready(function () {
$('.block').has('div.tab-container').removeClass('block');
});
This way you will remove the block class so no styles.
JSFIDDLE
jQuery('.parent:visible').each(function () {
if (jQuery(this).find('.child-1').is(':hidden')) {
jQuery(this).find('.child-2').css('color', '#000')
}
});
Selecting the children are easy, separately, but since there are no if statements in CSS, I'm hoping there's some magic CSS I'm missing.
edit: fixing js as per suggestions
.parent:not(.hidden) .child-1:not(.hidden) + .child-2 perhaps?
Demo
.parent { border:1px solid red; }
.hidden { display:none; }
.parent:not(.hidden) .child-1:not(.hidden) + .child-2 {
color:green;
}
<div class="parent">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>
<div class="parent">
<div class="child-1 hidden">one</div>
<div class="child-2">two</div>
</div>
<div class="parent hidden">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>
<div class="parent">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>
If you can add classes to the elements based on their visibility, then you can do this.
.parent.visible .child-1.not-visible + .child-2 {
color: #000
}
This will check if a .child-1 inside a .parent.visible has a class of .not-visible -- if it does, then the adjacent sibling with a class .child-2 will inherit this rule.
Otherwise, you have to use JavaScript as CSS doesn't have a way to test if an element is visible or not.