Is there a way to remove a parent without a child? There are 3 parents I need to delete, which is class "DELETE-A DELETE-B DELETE-C". Most articles I read, just delete 1 element only
Or maybe can i delete all the contents in the class DELETE-A without deleting the contents of the class KASKUS-C? So the class DELETE-D and class DELETE-H classes will also be deleted
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="DELETE-A">
<div class="DELETE-B">
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
</div>
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
</div>
<div class="DELETE-D">
<div class="DELETE-F">prev</div>
<div class="DELETE-G">next</div>
</div>
<div class="DELETE-H">
<div class="DELETE-I"><span></span></div>
<div class="DELETE-J"><span></span></div>
</div>
</div>
</div>
I want to be this
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
I using this
$(document).ready(function() {
$('.DELETE-D').remove();
$('.DELETE-H').remove();
$('.DELETE-A').remove();
$('.DELETE-B').remove();
$('.DELETE-C').not("KASKUS-C").remove();
// and
$('.DELETE-C:not("KASKUS-C")').remove();
// and
var DELETEC = $('.DELETE-C').contents();
$(".DELETE-C").replaceWith(DELETEC);
// and
$('.DELETE-A').not("KASKUS-C").remove();
// etc
});
But still not working https://jsfiddle.net/wwg35jeu/
You can use the JQuery unwrap() function if your element has children, or remove() if it has none :
$('[class*="DELETE-"]').each(function(){
if($(this).children().first().length > 0) $(this).children().first().unwrap();
else $(this).remove();
});
console.log($('body').children().eq(1)[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="DELETE-A">
<div class="DELETE-B">
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
</div>
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
</div>
<div class="DELETE-D">
<div class="DELETE-F">prev</div>
<div class="DELETE-G">next</div>
</div>
<div class="DELETE-H">
<div class="DELETE-I"><span></span></div>
<div class="DELETE-J"><span></span></div>
</div>
</div>
</div>
Related
I have a list of 12 posts wrapped in a div tag and the structure looks like this:
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
At the end I would have my structure like this:
<div class="row">
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
You can do something like this
// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
$(this)
// get all siblings next to it
.nextAll('.content')
// get only next 2 elements from it
.slice(0, 2)
// combine the current element with it
.add(this)
// wrap all elemnts with the div(3 divs)
.wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.
var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
if (index++ >= 2) {
var newWrapper = test.appendChild(document.createElement("div"));
newWrapper.className = "wrapper";
index = 0;
}
test.removeChild(child);
newWrapper.appendChild(child);
}
console.log(test.innerHTML);
<div class="row" id="test">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Try this
function WrapUpAllDivs(){
var CurrentDivs = $(".row",".content");
for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
CurrentDivs
.slice(i, i+3)
.wrapAll("<div class=\"wrapper\"></div>");
}
}
I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?
My Code:
html:
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
javaScript Code :
function newPerson() {
document.getElementByClassName("item")
};
Try it :
$(document).ready(function(){
$("button.plus").on("click",function(){
$("div:last").after("<div class=item><p>Title</p></div>");
})
})
This is Demo : UpdatedDemo
Do it like this
<div id = "main">
//your same html code
</div>
<script>
function newPerson() {
var newdiv = document.createElement('div');
newdiv.className+='item';
var newp = document.createElement('p');
newp.innerHTML = "TItle";
newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
</script>
You need to create the element through JS and append it to the document
This is another way to solve it:
function newPerson() {
$('#wrapper').append('<div class="item"><p>Title</p></div>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
</div>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.
I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.
here is my example code:
<div class="content">
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
</div>
I've tried using something along the lines of:
$('.item .col1 .img1').each(function(){
$(this).prependTo('.item .col3 .img2')
})
but what i get is all the images being added to all the rows.
Please help! thanks in advance
Should be as simple as this:
$(".col1").each(function (index, element) {
$(this).closest(".col3").prepend($(this).contents());
});
You could use this to insert column 1 after column 3:
$('.col1').each(function(){
$(this).insertAfter($(this).siblings('.col3'));
});
... or before column 3:
$('.col1').each(function(){
$(this).insertBefore($(this).siblings('.col3'));
});
Used jQuery functions:
insertAfter
insertBefore
siblings
I have markup like this:
<div class="container">
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
</div>
I'm trying to get the children of container so all of the items, then I want to .slice(0,2) so I can get the first two item divs.
I've tried using $('.container').children(), but this only seems to return the first item. Any suggestions?
Thank you
IIRC, this is what you're after:
var $firstTwo = $('.container > .item:lt(2)');
http://jsfiddle.net/9jp5D/
you can do it like
var first2divs = $('.container .item').slice(0, 2);