I have HTML like :
<div id="parent">
<ul class="list">something here....</ul>
</div>
When page load, I want kill div that have id="parent". That means after finish the loading, I have only :
<ul class="list">something here....</ul>
How Javascript or Jquery can do this? Thanks for your help.
Can you try:
$(function() {
$("ul.list").unwrap();
});
Docs for unwrap().
Try this famous code to completely remove div:
document.addEventListener('DOMContentLoaded',function(){
var element = document.getElementById("parent");
element.parentNode.removeChild(element);
},false);
remove element by id
And to remove only parent div use jQuery's unwrap:
$(function() {
$("ul.list").unwrap();
});
OR in plain javascript:
function unwrap() {
var a = document.getElementById('element-to-be-unwrapped');
newelement = a.firstElementChild.cloneNode();
document.body.insertBefore(newelement, a);
a.parentNode.removeChild(a);
}
in jQuery, here is the code:
var ul_holder = $('#parent').html();
$('#parent').remove();
$(document).append(ul_holder);
You can replace $(document) with any other element
Use .unwrap() function
if ( $(".list").parent('#parent').is( "div" ) ) {
$(".list").unwrap();
}
You can use closest() with remove()
$(function() {
$("ul.list").closest('#parent').remove();
});
or you can use unwrap() like,
$(function() {
$("ul.list").unwrap();
});
Related
Jsfiddle at demo.
I have a contenteditable div. I want the html of whatever I write in that div, on the click of anchor tag.
Right now, div is working but nothing is showing on click of the anchor tag.
function getcode()
{
var content = $('#my-contenteditable-div').html();
alert (content);
}
You can do this as well:
$("a").click(function () {
alert($('#my-contenteditable-div').html());
});
Here is the JSFiddle
Then you don't need to write separate functions and attach it to the onclick event attribute of the a tag
Try This
// get the link
var link = document.getElementById("linkId");
// add click listener to it
link.addEventListener("click",getcode,false);
// you handler
function getcode()
{
var content = document.getElementById("my-contenteditable-div");
alert (content.innerHTML);
}
Just you can go with jquery
Working Fiddle
$(document).ready(function() {
$('#gethtml').on('click', function(e) {
var content = $('#my-contenteditable-div').html();
alert (content);
});
});
can use this use id in a and a div to show data
<div contenteditable="true" id="my-contenteditable-div">
sdfsdfds
</div>
<a href="#" id="getcode" >Get HTML</a>
<div id="show"></div>
and jQuery
$( "#getcode" ).click(function() {
var contents = $('#my-contenteditable-div').html();
$("#show").text(contents);
});
I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?
this is what i have come up with:
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
http://jsfiddle.net/X6xcj/9/
is this:
$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();
what you are trying to achieve?
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().next().next().find('#Label2').removeClass('hidden');
});
Try this i may help you.
You should use .parent() not .prev() to get the containing div
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
Here you go: http://jsfiddle.net/5W48X/
.prev() gives you the previous sibling element.
.parent() gives you the container (parent) element.
EDIT:
I had not even seen the id's you use on divs yet. This should work as well:
$("#Label1").click(function () {
$(this).addClass('hidden');
$('#Label2').removeClass('hidden');
});
http://jsfiddle.net/6Zbsa/
try this:
$(function(){
$(".feature-addons").on('click', function(e){
var lbl = $(this).next();
$(".feature-addons").next().addClass('hidden');
lbl.removeClass('hidden');
});
});
im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});
Hello can I use each for elements that they are created on the fly?
$('#cart-info .shopp').each(function(){
var cartitem = $(this);
alert(cartitem);
cartitem.find('img.remove').on('click',function(){
alert(cartitem.attr('id'));
});
});
I created elements under div cart-info. But unfortenately the click event does not work. If the elements are provided when the page loads it works. For example look at http://jsfiddle.net/epapathanasiou/jpdZt/1/
$('#cart-info').on('click', '.shopp img.remove', function(){
// this is the `img.remove` element
alert($(this).closest('.shopp').attr('id'));
});
Here is the demo.
use event delegation
$('#cart-info').on('click', '.shopp img.remove', function(){
alert(cartitem.attr('id'));
});
You could also do this:
$('#cart-info .shopp').each(function () {
var cartitem = $(this);
console.log(cartitem.text());
cartitem.find('img').on('click',function () {
console.log(cartitem.attr('id'));
});
});
In Jquery or JavaScript have a function like .hasNext(). I have the code:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
and parent div is
<div class="list">
<div class="contact white_bg all_contacts">All</div>
<div class="contact">Contact1</div>
<div class="contact">Contact2</div>
</div>
After click last div need to do something. How can I do it?
You'll probably want :last-child.
$('a').click(function() {
$('.list .contact:last-child').doSomething();
});
Edit:
Or if you meant clicking the last child itself...
$('.list .contact:last-child').click(function() {
$(this).doSomething();
});
You should verify if there is any element when you're trying to select it:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
if(activeContact.next('div.contact').length > 0) {
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
}
Try Something Like
$('.list').find("div.contact:last").addClass('white_bg');
Second
$('.list .contact:last-child').addClass('white_bg');
Have you looked at $.fn.nextAll()?
Use the:last-child selector
$(".list div:last-child").on('click', function(){
//Do something
});
function showArrowClick() {
var activeContact = $('.contact.white_bg');
var index = activeContact.index();
if (index === $(".contact.white_bg").children().length - 1) {
// Current seleceted is the last div
}
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
You can try .next() to check. read more. Use it with the .length method to get to check if there are any more item on the DOM.
Sample code
alert($('div.contact').next().length);