event bubbling and 'this' weirdness - javascript

Apologies for not originally having a reproducible test case - I have now made one on CodePen:-
https://codepen.io/cssgrid/pen/971328c046d97ffd24decafa20804d3b/
I have a bunch of products. I want to remove the product from the DOM whenever someone clicks a remove button which is inside each product div.
My problem is: the last product in the list is being removed rather than the product with the button in it that the user actually clicked :(
<div class="product">
//some code
<button class="remove-btn">Remove</button>
</div><!-- end of product div -->
var products = document.querySelectorAll(".product");
for (let i = 0; i < products.length; i++) {
products[i].addEventListener("click", function(e) {
if (e.target.classList.contains("remove-btn")) {
this.remove();
}
})
}
Also tried in jQuery:
$(".remove-btn").on("click", function() {
$(this).closest(".product").remove();
})


Actually your code works just fine on further inspection. But I have included a simpler and more cleaner version of it below.
As you don't mind using jquery,
$('.remove-btn').click(function() {
$(this).parent('.product').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Lorem Ipsum 1</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 2</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 3</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 4</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 5</p>
<button class="remove-btn">Remove</button>
</div>

Related

How to hide specific json object data using jquery

I use a PHP file to parse json data as DIV objects, and below is the example of the results (in HTML)
// hidethis.js
$('.hidden').click(function() {
$('.agee').hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>
Preview: https://jsfiddle.net/xj71kqgb/
My problem is when I clicked any "Hide" button, all p.agee are automatically hidden.
The result I'm trying to achieve, when the "Hide Age A" button is clicked, only the p.agee from Data A will be hidden.
And also if possible, without needed to touch the JS script when new data is being added. Is it possible to achieve this?
Thanks.

Yes your code will hide all elements with class .agee.
You must change your code to this:
$('.hidden').click(function() {
$(this).closest("div.row").find(".agee").hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>
when you clicked on .hidden class. first must find closest div.row tag (parent div) then on this div you must find .agee and hide it.

You can use toggle function if you want show page again onclick
$('.hidden').click(function() {
$(this).closest('.row').find('.agee').toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>

Click card to display clone of the card at the top of the page

Stuck. Not sure how to proceed.
I have 10 cards. When the user clicks on a specific card, I would like to clone the card and have it append to a div on top of the page. However, when a user clicks on another card I do not want the first card to disappear, I want it to stay and add the second card next to the first card. Also, want to display a max of 5 cards at the top. If the user clicks on a sixth card, the first should disappear and the clicked card should appear as the last card and so forth.
$('.card').on('click', function() {
$('.main').slideDown('fast');
$('.card1').fadeIn(500).clone().appendTo($('.main1'));
$('.card2').fadeIn(500).clone().appendTo($('.main2'));
$('.card3').fadeIn(500).clone().appendTo($('.main3'));
$('.card4').fadeIn(500).clone().appendTo($('.main4'));
$('.card5').fadeIn(500).clone().appendTo($('.main5'));
});
.main { display: none;}
.card {
padding: 16px;
border: 1px solid #f00;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="main4"></div>
<div class="main5"></div>
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-2">
<p>Card 2</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-3">
<p>Card 3</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-4">
<p>Card 4</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-5">
<p>Card 5</p>
<p>Lorem ipsum</p>
</div>
<!-- 5 more cards -->
</div>

you can try with detach() method https://api.jquery.com/detach/
as #Cid said, use the right class name into jQuery selector .card-1 .card-2 and so on

You need to use the clone() and a check to see if .main has more than 5 items using children(). Please find the snippet below
$('.card').on('click', function() {
if ($('.main').children().length >= 5) {
$('.main .card').first().remove();
}
$(this).clone().hide().appendTo($('.main')).fadeIn(500);
});
.main {
display: flex;
}
.card {
padding: 16px;
border: 1px solid #f00;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-2">
<p>Card 2</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-3">
<p>Card 3</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-4">
<p>Card 4</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-5">
<p>Card 5</p>
<p>Lorem ipsum</p>
</div>
<!-- 5 more cards -->
</div>

you could use childen().first().remove to remove the first one. and then append a new div.
this is a try of what i think you want do
<div class="main">
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
</div>
<div class="card card-2">
<p>Card 2</p>
</div>
<div class="card card-3">
<p>Card 3</p>
</div>
<div class="card card-4">
<p>Card 4</p>
</div>
<div class="card card-5">
<p>Card 5</p>
</div>
</div>
$(document).ready(() => {
const main = $('.main')
const max = 3;
let count = 0;
$('.card').on('click', function () {
main.slideDown();
if (count < max) count++
else main.children().first().detach()
$(this).fadeIn(500).clone().appendTo(main);
});
})

Wrap HTML Elements

I have a HTML element like this:
<div class="entry-content">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<div class="download-attr"></div>
<div class="download-url"></div>
<div class="download-ads"></div>
</div>
I want to wrap it looks like:
<div class="entry-content">
<p>Lorem Ipsum</p>
<div class="entry-content-left">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<div class="download-attr"></div>
<div class="download-url"></div>
</div>
<div class="entry-content-right">
<div class="download-ads"></div>
</div>
</div>
How can I do it with jquery?

Here's how i'd do it:
$('.download-ads').wrap('<div class="entry-content-right"></div>');
$(".entry-content>*:not(p:first):not(div:last)").wrapAll('<div class="entry-content-left"></div>');
here's a fiddle:
https://jsfiddle.net/mckinleymedia/Lu2pjm8e/

Try this way:
var content = $(".entry-content");
var lhs = $('<div class="entry-content-left"></div>');
var rhs = $('<div class="entry-content-right"></div>');
lhs.append($(".entry-content>*:not(p:first):not(div:last)")); //you can create a different selector for this task
rhs.append($(".entry-content .download-ads"));
content.append(lhs).append(rhs);
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/953/

Is it possible to simplify jQuery string for toggle?

I have page with more icons and when you click on the icon you can see div where is some content. I would like to know if it is possible to write it somehow more simple then I do. I have 10 icons and I want to have always only one Div opened, so jQuery is quite long and 10 times almost the same.
This is how my jQuery looks like for 1 icon. It is almost the same for rest of them
$(".icon_pl").click(function(){
$("div#show").hide("slow");
$("div#rockz").hide("slow");
$("div#join").hide("slow");
$("div#wedding").hide("slow");
$("div#pl").toggle("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
} else {
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");}
return false;
});
Icons
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li><span class="icon_join"></span><h3>Join Us</h3></li>
<li><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
It works, but I would like to know if it is possible to make it somehow more simple and to write down every id (each div is different with different content, this is why id and not class)
Thank you

How about this. Note the selector is the LI since the span has no content
Actually Can you change the class on the span to ID or DATA attribute so one can always use
$span.attr("id").split("_")[1]; or $span.data("div2show");
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
.content div {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

you could put the name of the relating div in either a rel attribute or in a data prefixed attribute
then in JS/Jquery hide all of the divs, and only show the one you need - that relates to the new attribute.
something along the lines of
$(".icon").click(function(){
$(".maindivs div").hide();
var toggleDiv = $(this).attr("data-divToToggle");
$("#"+toggleDiv ).slideDown("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
}
else
{
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");
}
return false;
});

Following script would do what you expect.
$(function () {
//hide all div on load except first one
$('div.content div:not(#pl)').hide();
$("li.icon").click(function () {
var div = $(this).data('div');
$('div.content div.icon_active')
.removeClass('icon_active')
.hide('slow');
$('div.content div#' + div)
.addClass('icon_active')
.show('slow');
return false;
});
});
Your HTML would look something liek this.
<div class="iconteiner">
<ul>
<li class='icon' data-div='pl'><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li class='icon' data-div='join'><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li class='icon' data-div='wedding'><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li class='icon' data-div='rockz'><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li class='icon' data-div='show'><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
<div class="content">
<div id="pl" class="icon_active">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Here is WORKING JS FIDDLE

Unless the elements are related hierarchically, I'd add a data attribute to be able to easily find the correct content.
$(function() {
$('li[data-content]').click(function(){
$('li[data-content] span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
$('.content div').hide();
$('.content div[id='+$(this).data('content')+']').show();
});
});
.content div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li data-content='pl'><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li data-content='join'><span class="icon_join"></span><h3>Join Us</h3></li>
<li data-content='wedding'><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li data-content='rockz'><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li data-content='show'><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

jQuery : toggle class opening all class

I have following code and I have gone through many SO question but still I am not able to make it run.
I want to use toggle but problem is that It is opening all the class related to this.What I want is to toggle only class that is clicked.
I have tried e.preventDefault , e.stopPropagation(); and return false.But none of them worked for me.
NOTE I don't know the use of above mentioned three.I have used them at the end not at the beginning.
$(".read").click(function(e){
//e.preventDefault();
$(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Problem that $(".expand") returns all elements that has class .expand, but you need get only one element. You can do it like this
$(".read").click(function(e){
$(this).next('.expand').toggle();
return false;
});
Demo: http://jsbin.com/marale/1/edit?html,js,output

$(".read").click(function(e){
//e.preventDefault();
$(this).next(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

you can use
$(".read").click(function(e){
//e.preventDefault();
$(".read").next(".expand").toggle();
return false;
});

Please check the following code:
$(".read").click(function(e){
//e.preventDefault();
$(this).next('.expand').toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Try something like this. Here next() simply grabs the next element and $(this) referrs to the one currently clicked on.
$(".read").click(function(e){
//e.preventDefault();
$(this).next().toggleClass('expand');
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Categories

Resources