How to remove such type html elements using javascipt?
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="img/cd-icon-location.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. .</p>
Read more
<span class="cd-date">Feb 14</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
</section> <!-- cd-timeline -->
var element = document.getElementById('cd-timeline');
if (element) {
element.parentNode.removeChild(element);
}
You can just use:
document.getElementById("cd-timeline").outerHTML='';
You can use this:
document.getElementById('cd-timeline').remove();
If you would like to remove a element by it's id use:
var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);
If you would like to remove elements by their tag, class, etc. use:
var elems = document.getElementsByTag("myDiv");
for(var i = 0, len = elems.length; i < len; i++) {
if(elems[i] && elems[i].parentElement) {
elems[i].parentElement.removeChild(elems[i]);
}
}
Related
How do I generate table of contents dynamically. following is my code but its only for one heading tag h3. I need it to work for all headings.
Here is my following sample format of the post :
<html>
<head></head>
<body>
<div id="tableofcontent"></div>
<div class="entry-content">
<h1 id="Test1">Main Heading</h1>
<p>Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum</p>
<h2 id="Test2"> Sub Heading</h2>
<p>Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum</p>
<h3 id ="Test3">Sub Sub Heading</h3>
<p>Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum</p>
<h4>Sub Sub Heading</h4>
<p>Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum</p>
</div>
</body>
</html>
How do I generate table of contents dynamically.
following is my code but its only for one heading tag h3. I need it to work for all headings.
jQuery(document).ready(function($) {
var $aWithId = $('.entry-content h3[id]');
if ($aWithId.length != 0) {
if ($aWithId.length > 0) {
$('#tableofcontent').prepend('<nav class="toc"><h3 class="widget-title">Table of Contents</h3><ol></ol></nav>');
}
}
var $aWithId = $('.entry-content h3[id]');
if ($aWithId.length != 0) {
$('.entry-content').find($aWithId).each(function() {
var $item = $(this);
var $id = $(this).attr('id');
var li = $('<li/>');
var a = $('<a/>', {
text: $item.text(),
href: '#' + $id,
title: $item.text()
});
a.appendTo(li);
$('#tableofcontent .toc ol').append(li);
});
}
});
I would like to know if it's possible to get the height of many element with offsetHeight
<div class="container">
<div class="card">
<h4 class="card__title">My Title</h4>
<div class="card__img">
<img src="image.jpg" alt="">
</div>
<div class="card__description">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<div class="card">
<h4 class="card__title">Thailande</h4>
<div class="card__img">
<img src="image.jpg" alt="">
</div>
<div class="card__description">
<p>
Description 2
</p>
</div>
</div>
</div>
I would like to to have a translate on the .card__img of the height of .card__description on a 'mouseover', is it possible to get the offsetHeight using querySelectorAll('.card__description).offsetHeight and using a loop?
I tried but didin't work.
Thanks guys, I did it!
Here is my solution
const cards = document.querySelectorAll('.card')
function cardAnimation () {
for (let i = 0; i < cards.length; i++) {
let card = cards[i]
let cardImg = card.querySelector('.card__img')
let description = card.querySelector('.card__description')
let descriptionHeight = description.offsetHeight
card.addEventListener('mouseover', () => {
description.style.transform = `translateY(0)`;
cardImg.style.transform = `translateY(-${descriptionHeight}px) scale(1.2)`
})
card.addEventListener('mouseleave', () => {
description.style.transform = `translateY(100%)`;
cardImg.style.transform = `translateY(0px) scale(1)`
})
}
}
cardAnimation()
I am looking to loop through a list of elements and toggle a class on each one (.active), changing this every 4 seconds. The active class will change the background color of the icon and display it's relevant text underneath.
So, the first element in my list will have the class of active by default (and it's info will be shown by default) and all other info for the other icons will be hidden, then after 4 secs I want to remove this class and add the class to the next element (thus changing it's background color and displaying it's text) and so on, looping back to the first element once the last element has toggled the class.
I am trying to use jquery each() to accomplish this but can't seem to get it to work.
<div id="outer">
<div id="inner">
<div class="item wifi-icon"><i class="fa fa-wifi" aria-hidden="true"></i></div>
<div class="item plug-icon"><i class="fa fa-plug " aria-hidden="true"></i></div>
<div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
<div class="item wheelchair-icon"><i class="fa fa-wheelchair" aria-hidden="true"></i></div>
<div class="item play-icon"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>
</div>
<div id="info">
<div id="wifi-text" class="perk-text ">
<h3>Free WiFi</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="plug-text" class="perk-text ">
<h3>Power Sockets</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="suitcase-text" class="perk-text ">
<h3>Luggage</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="wheelchair-text" class="perk-text ">
<h3>Wheelchair Accessible</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="play-text" class="perk-text ">
<h3>Onboard Entertainment</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
</div>
</div>
.active {
background-color:#74BDE9;
color: #ffffff;
cursor: pointer;
}
$(document).ready(function(){
let itemsLength = $('#inner > .item').length;
let active = $('.active');
let item = $('.fa');
setInterval( function() {
item.each( function(index) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(this).next().addClass('active');
}
});
}, 4000);
$('.perk-text').hide();
if ( $('.fa-wifi').hasClass('active') ) {
$('#wifi-text').show();
};
if ( $('.fa-plug').hasClass('active') ) {
$('#plug-text').show();
};
if ( $('.fa-suitcase').hasClass('active') ) {
$('#suitcase-text').show();
};
if ( $('.fa-wheelchair').hasClass('active') ) {
$('#wheelchair-text').show();
};
if ( $('.fa-play').hasClass('active') ) {
$('#play-text').show();
};
});
Please find below a working example in vanilla JS
const icons = document.getElementsByClassName("fa");
const texts = document.getElementsByClassName("perk-text");
Array.from(texts).forEach(textElement => {
textElement.style.display = "none";
});
setInterval(() => {
const iconsArray = Array.from(icons);
const activeIconIndex = iconsArray.findIndex(icon => icon.classList.contains("active"));
const nextActiveIndex = (activeIconIndex + 1) % iconsArray.length
iconsArray[nextActiveIndex].classList.add("active");
iconsArray[activeIconIndex].classList.remove("active");
toggleText(iconsArray[nextActiveIndex].classList);
}, 4000);
function toggleText(activeIconClasses) {
let textIdToActivate = "";
switch (activeIconClasses[1]) {
case "fa-wifi":
textIdToActivate = "wifi-text";
break;
case "fa-plug":
textIdToActivate = "plug-text";
break;
case "fa-suitcase":
textIdToActivate = "suitcase-text";
break;
case "fa-wheelchair":
textIdToActivate = "wheelchair-text";
break;
}
Array.from(texts).forEach(textElement => {
textElement.style.display = "none";
});
const textElement = document.getElementById(textIdToActivate);
textElement.style.display = "block";
}
.active {
background-color: #74BDE9;
color: #ffffff;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/fontawesome.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<div class="item wifi-icon"><i class="active fa fa-wifi" aria-hidden="true"></i></div>
<div class="item plug-icon"><i class="fa fa-plug " aria-hidden="true"></i></div>
<div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
<div class="item wheelchair-icon"><i class="fa fa-wheelchair" aria-hidden="true"></i></div>
</div>
<div id="info">
<div id="wifi-text" class="perk-text ">
<h3>Free WiFi</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="plug-text" class="perk-text ">
<h3>Power Sockets</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="suitcase-text" class="perk-text ">
<h3>Luggage</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
<div id="wheelchair-text" class="perk-text ">
<h3>Wheelchair Accessible</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
</div>
</div>
setInterval + toggleClass will do this for you. An example changing text colour every 2 seconds:
setInterval(function() {
$("#para").toggleClass("red")
}, 2000)
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="para">Hi there</p>
how to remove html tag in contenteditable with selection text
function testdemo() {
//what is next
....
}
Before :
<button onclick="testdemo();">RUN</button>
<div id="test" contenteditable="true">
<b>Lorem ipsum</b> dolor sit amet, <span style="color:red;">ea ignota verear</span> quaerendum
</div>
After :
<div id="test" contenteditable="true">
Lorem ipsum dolor sit amet, ea ignota verear quaerendum
</div>
Thank you in advance
Try this:
JS:
function testdemo() {
var div = document.getElementById('test');
div.innerHTML = div.textContent;
}
Jquery:
function testdemo() {
$('#test').html($('#test').text());
}
jQuery version would be as below:
function testdemo() {
$("#test").html($("#test").text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="testdemo();">RUN</button>
<div id="test" contenteditable="true">
</div>
function testdemo() {
var div = document.getElementById('test');
div.innerHTML = div.textContent;
}
<button onclick="testdemo();">RUN</button>
<div id="test" contenteditable="true">
<b>Lorem ipsum</b> dolor sit amet, <span style="color:red;">ea ignota verear</span> quaerendum
</div>
See if this helps.
function testdemo() {
$('#test').html($('#test').text()).text();
}
My code runs below so that the correct div is appended to the page when I click the '.show-more' button. I want to be able to append 5 of these divs every time I click this button, but not sure how to do that?
HTML
<div class="content-section news-preview clearfix">
<div class="title">Title of News Article</div>
<div class="clearfix">
<div class="image-container">
<img src="images/news_sample208x135.jpg" width="208" height="135">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p>
</div>
</div>
<a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>
</div>
<!-- /content-section -->
<div class="show-more-container">
<div id="content-news-container"></div>
<button class="btn show-more">Show 5 More</button>
</div>
jQuery
$('.show-more').click(function() {
var contentNews = $('div.content-section:last').prop('outerHTML');
console.log("contentNews", contentNews);
$('#content-news-container').append(contentNews).slideDown(slow);
});
You can use a DocumentFragment to append all of the elements in one go in an efficient manner
$('.show-more').click(function () {
var contentNews = $('div.content-section:last').prop('outerHTML');
var frag = document.createDocumentFragment();
for (var i = 0; i < 5; i++) {
frag.appendChild($(contentNews).get(0));
}
$('#content-news-container').append(frag).slideDown(slow);
});
EDIT: fiddle - http://jsfiddle.net/sc5585x7/
Just create a loop and clone the DIV five times:
$('.show-more').click(function () {
for (var i = 0; i < 5; i++) {
var contentNews = $($('div.content-section:last')[0].cloneNode(true));
$('#content-news-container').append(contentNews).slideDown('slow');
}
});
Fiddle here: http://jsfiddle.net/ToddT/364y88af/
EDIT:
As was pointed out, using a DocumentFragment is the more efficient way to do this sort of manipulation:
$('.show-more').click(function () {
var contentNews = $('div.content-section:last').prop('outerHTML');
var frag = document.createDocumentFragment();
for (var i = 0; i < 5; i++) {
frag.appendChild($(contentNews).get(0));
}
$('#content-news-container').append(frag).slideDown(slow);
});
Per #Travis Kaufman's answer.