Remove all #div id from domtree with class .selected - javascript

How to remove all divs with id #divs with class .something with vanilla javascript.
For example:
function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
var elem = document.getElementById("box1");
elem.remove();
}
}
}
This will delete all div box1 but I want to delete all box1 with class .selected

Simply use:
for (var i = 0; i < removeEl.length; i++) {
removeEl[i].remove();
}
You already selected all elements which you want to remove. So it's not necessary to select it again with a given id.

function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
//var elem = document.getElementById("box1");
removeEl[i].parentNode.removeChild(removeEl[i]);
}
}
}

Related

Why do all divs have the same name?

I want to delete after clicking the product button, but it does not work properly I do not know why. It does not remove the correct object from the table
document.addEventListener('click', function(e) {
if (e.target.id === 'removeItem') {
var divWithItem = document.getElementsByClassName('containerBasket__allProducts__product');
// Pobieram name itemu
var nameItem = e.target.parentElement.parentElement.getAttribute('name');
var thisItemDiv = e.target.parentElement.parentElement;
var thisItem = JSON.parse(products[nameItem]);
products.splice(thisItem, 1);
localStorage.setItem('product', JSON.stringify(products));
thisItemDiv.remove();
for (var i = 0; i < products.length; i++) {
for (var j = 0; j < divWithItem.length; j++) {
divWithItem[j].setAttribute('name', [j]);
}
}
console.log(products);
}
});
Before looping
After looping
Why does a div with the same name?

How do i convert a Jquery code to Pure javascript

I am using Bootstrap.
I am not able to figure out how to put this in pure javascript.This will open a div when we click on the accordion.
$(function() {
$("#panelTicketsList .list-group-item").on("click", function() {
$("#panelTicketsList .list-group-item").removeClass('selected');
$(this).addClass('selected');
if ($('#panelTicketsList').hasClass('col-md-12')) {
$('#panelTicketsList').removeClass('col-md-12').addClass('col-md-3');
$('.panelTicketDetail').removeClass('hide');
}
});
});
jsFiddle : https://jsfiddle.net/tqdc6yyL/
var listGroupItems = document.getElementsByClassName('list-group-item');
for (j = 0; j < listGroupItems.length; j++) {
listGroupItems[j].addEventListener("click", function () {
var elements = listGroupItems;
for (i = 0; i < elements.length; i++) {
if (elements[i].className.indexOf("col-md-12") > -1) {
elements[i].className = elements[i].className.replace("col-md-12", "col-md-3");
elements[i].className = elements[i].className.replace("hide", "");
}
}
this.className = this.className + " selected";
});
}
var list = document.getElementById('panelTicketsList');
var items = document.querySelectorAll("#panelTicketsList .list-group-item");
var detail = document.querySelectorAll(".panelTicketDetail");
items.forEach(function(btn){
btn.addEventListener("click", function(){
items.forEach(function(item){ item.classList.remove("selected"); });
this.classList.add("selected");
if(list.classList.contains('col-md-12')) {
list.classList.remove('col-md-12');
list.classList.add('col-md-3');
detail.classList.add("hide");
}
});
If you have to support older browsers like IE8 or IE9, you can't use JS features like forEach or classList. Instead you should use for loop and className.
//Save DOM query in variable for reuse
var panelTicketsList = document.getElementById('panelTicketsList');
var panelTicketsDetails = document.getElementsByClassName('panelTicketDetail');
var listGroupItems = panelTicketsList.getElementsByClassName('list-group-item');
//go through all of the listGroupItems and set click listener
for (var i = 0; i < listGroupItems.length - 1; i++) {
listGroupItems[i].addEventListener("click", function() {
//On click, go through all of listGroupItems and remove selected class
for (var j = 0; j < listGroupItems.length - 1; j++) {
listGroupItems[j].className = listGroupItems[j].className.replace('selected', '');
}
//Add selected class for clicked element
listGroupItems[i].className += 'selected';
//test if main element has class col-md-12
if (panelTicketsList.className.indexOf("col-md-12") > -1) {
//replace clas col-md-12 with col-md-3
panelTicketsList.className = panelTicketsList.className.replace('col-md-12', 'col-md-3');
//go through all of the panelTicketDetails and remove hide class
for (var k = 0; k < panelTicketsDetails.length - 1; k++) {
panelTicketsDetails[k].className = panelTicketsDetails[k].className.replace('hide', '');
}
}
});
}

move class between elements with pure JavaScript without using jQuery

Can you help me here with this ordinary js code as I want to move the className "active" from item to another item including removing all elements class and keep it with the this.item
function moveClass(){
var item = document.getElementsByClassName('item');
for(var i = 0 ; i < item.length ; i++){
var items = item[i];
items.onclick=function(){
items.classList.remove('active');
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)
You can use document.querySelector('.item.active') to find the current active item, and remove .active from it. Afterwards, just assign active to the clicked item (fiddle):
function moveClass() {
var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
var prevActive = document.querySelector('.item.active');
prevActive !== null && prevActive.classList.remove('active');
this.classList.add('active');
}
}
}
document.addEventListener('DOMContentLoaded', moveClass);
Loop through each item and remove the active class from it. Then add active to this (the item being clicked)
function moveClass(){
var items = document.getElementsByClassName('item');
for(var i = 0 ; i < items.length ; i++){
items[i].onclick=function(){
for (var j = 0; j < items.length; j++) {
items[j].classList.remove('active');
}
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)
http://jsfiddle.net/zutqwdf8/

Make table TD bold if it does not contain dash

Here is the code but not working.
<script type="text/javascript">
var emptyTar = document.getElementsByTagName("td").innerText;
if(emptyTar.indexOf('-') === -1)
{
emptyTar.bold();
}
</script>
getElementsByTagName returns collection of elements, not single element. You have to make a loop over this collection.
var emptyTar = document.getElementsByTagName("td");
for (var i = 0; i < emptyTar.length; i++) {
if (emptyTar[i].innerHTML.indexOf('-') === -1) {
emptyTar[i].style.fontWeight = 'bold';
}
}
http://jsfiddle.net/8ydwqLns/1/
You clould do
var emptyTar = document.getElementsByTagName("td");
for(i = 0;i < emptyTar.length; i++)
{
if(emptyTar[i].innerText.indexOf('-') === -1)
{
emptyTar[i].innerHtml = emptyTar[i].innerText.bold();
}
}

Getting the index of the current element and change his styles

I have a function whose destination is to work onClick event.
So, we have for example 4 Span elements and 4 Div elements.
The Spans are Tabs-buttons which I would like to "open" those Divs.
The 1st Span onClick would (open) change the style.display of the 1st Div in "block", from "none", and so on for the next Spans.
This piece of code works very well, but it changes only the design of elements.
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
}
I've tried to add the code below into my function to achieve what I want, but It does not work.
var getIndex = function(s) {
for (var index = 0; s != s.parentNode.childNodes[index]; index++);
return index;
}
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else {
supDivs[d].style.display = "none";
}
}
I'm not exactly sure what you're trying to do, but one thing I noticed is this:
var getIndex = function(s) { /* .... */ }
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else { /* ... */ }
}
This code is comparing getIndex to d, which means it's comparing an integer (d) to the function getIndex, instead of the result of the function call getIndex(spans[d]) (which is an integer, like d).
But what I think you're really trying to do, is getting the index of the clicked <span> so you can show the <div> with the matching index (and hide the rest). To achieve this, the code could be changed like so:
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
var index;
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
if (s == spans[i])
index = i;
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
for (var d = 0; d < supDivs.length; d++) {
if (index == d) {
supDivs[d].style.display = "block";
} else {
supDivs[d].style.display = "none";
}
}
}
Instead of the function getIndex, this just saves the correct index inside the first for loop.
There are many more improvements that could be made to this code, like rewriting it so you don't need that ugly s.parentNode.parentNode.parentNode.parentNode.parentNode and working with CSS classes instead of manually setting the style. But I'll leave that to the reader.

Categories