How do I append .div4 to .div1 onLy on its parent container without it also appends to the next container with the same div? I tried the basic jQuery appendTo but this sets .div4 on all the .div1 elements in my DOM.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
Update: changed invalid HTML. Using this script now (replace dummy divs with my actual divs):
var $this = $('span.conditionHilite.refurbHilite');
$this.appendTo($this.closest('.itembox.centerbox.col.span_1_of_3').find('.image.col1'));
Problem now is that if my page consist of more then one container with"span.conditionHilite.refurbHilite" it will append the total amount of these elements inside each parentcontainer instead of just the one.
If you tried to append an element to more than one target element with jQuery, it will clone that element however many times is required. If you only want to append .div4 to the .div1 element within its same container element, you'll need to explicitly select that element. Something like this:
var $this = $('.div4');
$this.appendTo($this.closest('.container').find('.div1'));
That uses .closest() to traverse up the DOM tree to find the containing element, then .find() to look within that containing element for the .div1 element. With your current DOM structure that will only ever be a single element, so the .div4 element is simply moved, without any clones being created.
Note: As Rory McCrossan pointed out, you're re-using IDs in your HTML and it is therefore invalid. I've used a class selector in the code above on the assumption that you'll fix your invalid HTML by switching from id="container" to class="container". If - as stated in the comments - you absolutely can't change that, then the '[id="container"]' selector should work instead.
Related
A lot of .cell elements are added to the DOM on document load. Only some of them are needed. If an <img> was also created within them, they are needed. If an <img> element was not created within the .cell elements, then delete the whole .cell element. If the <img> was created then do nothing.
How can I do that?
<div class="cell">
<div class="a-class">
<div class="always-generated-div"></div>
<img> <!-- if generated --->
</div>
</div>
jq(".cell img").each(function() {
if (jq(this).length > 0) {
console.log("Oh There You Are");
} else {
console.log("Empty elements erased");
jq( ".cell" ).remove();
}
});
You can select a parent by their child elements using the :has() selector (and the :not() selector in this case too). From there, you can remove() them. Try this:
$('.cell:not(:has(img))').remove();
Working example
You can use :empty selector
Select all elements that have no children (including text nodes).
jq(".cell:empty").remove()
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
Suppose I have some HTML as so,
<div id="first"></div>
<div id="second"></div>
and using JavaScript and JQuery I attempt to do the following
var $child = $("<span id='child'>Hello</span>");
$("#first").append($child);
$("#second").append($child);
Will I have two copies of the child node, or will I have two references to the same child node?
Update
I realise that my example creation of a child element is a bit wrong. Perhaps
var $child = $("<span/>").text("Hello");
is a bit more correct.
Child appended in the #first element will get moved to #second element leaving #first element empty. You can use clone() to insert a copy of the child element.
However, there should not be multiple elements with the same ID in DOM, so please change ID to Class for the child element
If i clone an element, then if i want to customize that element (by id) how can customize also the element cloned ?
What i tried:
<div id="A"> //the element that will be clone
</div>
<div id="box" style="margin-top: 50px"> //into this box
</div>
CSS
#A{
width: 100px;
height: 100px;
background: #000;
}
JS
$('#A').clone(true).appendTo('#box');
$('#A').css('background','#ff0000');
//i want to get red background also to element cloned, infact only the true original element change color :/
This is jsfiddle: https://jsfiddle.net/t90ptkcz/1/
I hope that this is possible and you can help me. Thanks a lot and sorry for my english :)
ID # selector finds the unique single element from DOM though multiple elements having same ID present in DOM but class . selector used to get group of elements,having the same class name
<div id="A" class="someClass" > //the element that will be clone
</div>
<div id="box" style="margin-top: 50px"> //into this box
</div>
JS
$('#A').clone(true).appendTo('#box');
$('.someClass').css('background','#ff0000');
I prefer the answer from #shu and however I am not sure in which scenario this could be helpful it is possible to achieve exactly what you want by implementing a jQuery plugin with two methods:
$.fn.cloneAndRemember - will clone an element and store both the source element and its clone (or clones) into a dictionary
$.fn.withClones - will give you a jQuery object collection which includes a selected element and all its clones (retrieved from the dictionary)
The use case would then look like this:
$('#A').cloneAndRemember(true).appendTo('#box');
$('#A').withClones().css('background','#ff0000');
Im trying to duplicate a class and to make it not change when the original is changed. currently I tried
$(".newclass").addClass("oldclass");
which does not copy the content
var _elementClone = $(".oldclass").html();
$(".newclass").html(_elementClone);
this one is good and transfers all the contents of the div
PROBLEM: in all cases when I change the oldclass parent. like
$('.oldclass').hide();
<style>
.oldclass{visibility:collapse}
</style>
the new one also changes.
How can I create new class which does not change when the parent is changed?
You can duplicate the element by getting it's outer HTML, use jQuery to change it's id, class or whatever, and then insert it into the DOM to have independent elements.
EXAMPLE
HTML:
<div id="first" class="top">First Div</div>
<div id="second" class="middle">Second Div</div>
<div id="third" class="middle">Third Div</div>
<div id="last" class="bottom">Last Div</div>
Javascript:
var divs=$(".middle");
$.each(divs,function(i,el) {
var newdiv = $(el.outerHTML);
newdiv.attr("id",newdiv.attr("id")+"-copy");
newdiv.removeClass("middle").addClass("middle-copy");
divs.eq(i).after(newdiv);
});
$("#second-copy").html("copy of second div");
$("#third").html("original third div");
setInterval('$(".middle-copy").toggle()',1000);
Fiddle: http://jsfiddle.net/0cy0gvj9/2/
In the first line you're assigning .newclass to .oldclass. So, when later you hide .oldclass, this selector will include the previous assignment. That is, since all .newclass items are also .oldclass ones, they get hidden as well.
The function you're looking for is .append(), which will append a child to a given element (thus making it a parent).