Remove class from div with loop/array - javascript

I have 4 divs with same Class and Id. What I am looking for is to remove display-none-class on that specific div whenever #button is clicked.
What I have done now is to give an additional class name to each div so they are more "recognizable" for jQuery.
Here is my code:
html
<div class="parentdiv">
<h3 id="button">remove class</h3>
<div class="display-none" id="element">
Show me on button click
</div>
</div>
jquery
$('h3#button').each(function(i){
$(this).addClass('remove-btn-' + (i+1));
});
$('div#element').each(function(i){
$(this).addClass('remove-this-' + (i+1));
});
So What I am looking for is to loop through remove-this-1, remove-this-2 etc and remove display-none class when ever remove-btn-1, remove-btn-2 etc is clicked.


Use one more class to the div which has display-none class
give same class to each button
wrap them in a parent them
use this to achieve your goal
Whenever you click on the button, it will look for class box of current clicked the button. For demo purpose - I have applied CSS to display-none class, So that you can see changes.
$(document).ready(function(){
$('.button').click(function(){
$(this).prev('.box').removeClass('display-none');
});
});
.display-none {
display: inline-block;
padding: 5px;
background: tomato;
color: #fff;
border-radius: 3px;
}
.button {
display: inline-block;
padding: 5px;
background: steelblue;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="display-none box">Lorem ispum 0...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 1...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 2...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 3...</div>
<p class="button">Remove Class</p>
</div>


Are you looking for something like this
$('.button').click(function(){
$(this).next().removeClass('display-none');
});
.display-none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 1
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 2
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 3
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 4
</div>
</div>


First of all the id (#) value has to be unique. I suggest you creating unique ids.
For removing a class from an element with jquery you can use the .removeClass('class_name')

Related

How can I achieve the same without having the onclick = "showHide (this) in the html, but in jquery?

I want to put this function that is in the html:
onclick="showHide(this)"
but by jquery
https://codepen.io/ygovi/pen/jOWgMGq
HTML:
<div id="div" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
JQUERY JQ:
$('.showHide').hide();
function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle().siblings(".showHide").hide();
}
:( please help
you must retain the behavior:
-When I click on the first div with the options class, the corresponding .showHide div is displayed and any other div .showHide that has been opened before is hidden
-And when I click the div of the options class again, the corresponding .showHide div is hidden
https://codepen.io/ygovi/pen/jOWgMGq

Jquery approach :
$('.options').click(function(){ $(this).next(".showHide").toggle(); });
and by removing .siblings(".showHide").hide() other showhide class will be as it is...
$('.showHide').toggle();
$('.options').click(function(){
$(this).next(".showHide").toggle();
});
/*function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle();
}*/
<script src="https://code.jquery.com/jquery-3.5.1.js
"></script>
<div id="div" class="options" >This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" >This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" >This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>

The problem you mentioned here is due to siblings() function. Siblings are supposed to be nested in same wrapper.
$('.mi_cuenta_opciones--detalles').hide();
$('.mi_cuenta_opciones--iconos').click(function() {
$(this).next(".mi_cuenta_opciones--detalles").toggle().closest('tr').siblings('tr').find('.mi_cuenta_opciones--detalles').hide();
});
table {
border: 1px solid #000;
}
.mi_cuenta_opciones {
position: relative;
}
.mi_cuenta_opciones--iconos {
padding-left: 20px;
color: #000;
}
.mi_cuenta_opciones--detalles {
width: 144px;
height: auto;
border: 0.5px solid #ccc;
background-color: #fff;
/* position: absolute; */
position: absolute;
top: 22px;
left: 60px;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Pedido1</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Pedido2</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Pedido3</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
</table>
$('.showHide').hide();
$('.options').click(function() {
$(this).next('.showHide').toggle().siblings('.showHide').hide();
});
<div id="div" class="options">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Is is possible to target last element inside a class div? CSS

I understand that I can target the last element if they are using the same class or they are the same element. But the way I am building is user will put in whatever element inside the (please see attached example). Just wondering is it still possible to call out by CSS? or that will be something cannot be done by CSS?
.header p:last-of-type{
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>

If you're trying to just add color: red; styling to the last <p> tag inside the last class='header' class, then you should use
CSS Selectors:
CSS:
.header:last-of-type p:last-of-type {
color: red;
}
You can check this working code sample.
Edit:
If you want to target the last element of each tag with the class='header', you coud accomplish it like so:
CSS:
.header *:last-child {
color: red;
}
Check the working code sample.

yes with last-child and .header p:last-child will target the last child if it's <p> </p> element and if you want to target the last element in a div that have a .header as a class.
you can use .header *:last-child as mention in the comments section by #Chris G
.header *:last-child {
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
<p>ddd</p>
</div>

try this
.header *:last-child{
color : red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>

How to show the content of a custom nav tab with JQuery?

I have made custom tabs with a function in JQuery. This is my custom tabs:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="item1">
Show content from item 1
</div>
<div class="item2">
Show content from item 2
</div>
<div class="item3">
Show content from item 3
</div>
This is the custom styling I made with the tabs:
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
And this is my function to activate the tabs (working)
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
//show div for item1
break;
case 'item2':
//show div for item2
break;
default:
}
When I switch from tab I want to show the content from the class. I have tried with the toggle() function from JQuery. Also I have checked this stackoverflow post:
Bootstrap tab activation with JQuery
This is what I want but it didn't work for my solution because I don't use the nav tabs of bootstrap.
How can I show the content from each nav tab?

To show content you can simply call show() on it. You can also make your logic more DRY and extensible by converting the clickable div elements to a and using the href attribute to target the content to be displayed. This saves you having to write endless if conditions or switch cases, as it will work for an infinite number of tabs. It also means that, if required, you can open tabs when the page loads via the fragment of the URL. Try this:
let $tabs = $('.tab-content');
let $triggers = $('.master-advanced-left-tab').on('click', function(e) {
e.preventDefault();
$triggers.removeClass('master-advanced-left-tab-active');
var $elem = $(this).addClass('master-advanced-left-tab-active');
$tabs.hide();
$tabs.filter($elem.attr('href')).show();
});
$triggers.first().trigger('click');
.master-advanced-left-tab {
display: block;
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab>p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab-content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<a href="#item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</a>
<a href="#item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</a>
<a href="#item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</a>
</div>
<div class="tab-content" id="item1">
Show content from item 1
</div>
<div class="tab-content" id="item2">
Show content from item 2
</div>
<div class="tab-content" id="item3">
Show content from item 3
</div>

hide and show the method can be used for this purpose, Hope this helps
$('.master-advanced-left-tab').click(function(e){
$(this).addClass('master-advanced-left-tab-active').siblings().removeClass('master-advanced-left-tab-active')
var class1 = $(this).attr('data-id')
$('.'+class1+'').removeClass('hide').siblings().addClass('hide')
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="wrap">
<div class="item1 ">
Show content from item 1
</div>
<div class="item2 hide">
Show content from item 2
</div>
<div class="item3 hide">
Show content from item 3
</div>
</div>

You can see my code:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="content-item item1 active">
Show content from item 1
</div>
<div class="content-item item2">
Show content from item 2
</div>
<div class="content-item item3">
Show content from item 3
</div>
Css: add more some line:
.content-item {
display: none
}
.content-item.active {
display: block
}
Then JS:
$('.master-advanced-left-tab').click(function (){
let elem = $(this);
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
$('.content-item').removeClass('active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
$('.item1').addClass('active')
break;
case 'item2':
$('.item2').addClass('active')
break;
default:
$('.item3').addClass('active')
}
})
This is a demo: https://codepen.io/phuongnm153/pen/vYBXBGM

Instead of swith you can use something more responsive like this:
function changeTab(element) {
// remove 'active' class from item and tab to prevent multiple
// tab selection
$('.master-advanced-left-tab').removeClass('active');
$('.tab').removeClass('active');
// add class 'active' to clicked item and proper tab
// tab class is taken from 'data-tab' property from item in html
$(element).addClass('active');
$('.tab.' + $(element).data('tab')).addClass('active');
}
// change tab to first at init to prevent none tab selected
// You can replace this by adding class 'active' to
// 'master-advanced-left-tab' and 'tab' item in html
changeTab( $('.master-advanced-left-tab:first-child') );
// not much to explain
$('.master-advanced-left-tab').on('click', function(){
changeTab(this);
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
/* changed from .master-advanced-left-tab-active to shorten code */
.master-advanced-left-tab.active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab {
height: 0;
overflow:hidden;
}
.tab.active {
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<!-- property 'data-tab' for js function to select proper tab -->
<div data-tab="item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</div>
<div data-tab="item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div data-tab="item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="tab item1">
Show content from item 1
</div>
<div class="tab item2">
Show content from item 2
</div>
<div class="tab item3">
Show content from item 3
</div>

Add / remove div for each button on click

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?

Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>

Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));

In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>

Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Categories