I have a hierachy of DIVs with classes associated but not IDs. How can I remove the item being clicked?
<div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
</div>
<script>
function remove_me(){
///remove the clicked div
}
</script>
$('div .minibox').click(function(e){
$(e.target).remove();
});
$('.minibox').click(function() { $(this).remove(); });
Change
<div class="minibox" onclick="remove_me()">Box1</div>
to
<div class="minibox" onclick="remove_me(this)">Box1</div>
then use
<script>
function remove_me(elm){
$(elm).remove();
}
</script>
Inside the jQuery document.ready() event, you need to bind a click handler to the div's
$(document).ready(function() {
$('.minibox').click(function(e){
$(this).remove();
});
});
Check out jQuery remove() and click().
The this inside the event handler refers to the element that was clicked on.
$(document).ready(function() {
$('.minibox').click(function () {
$(this).remove();
});
});
Check out remove().
If you can use jQuery to register your event it is as easy as:
$(".minibox").click(function(){
$(this).remove();
});
Code example on jsfiddle.
your html:
<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
ect...
your jQuery
$(function(){ //make sure your DOM is ready
$("div.box").click(function(){ // bind click on every div that has the class box
$(this).remove(); //remove the clicked element from the dom
});
});
Demo with fadeOut animation:
http://jsfiddle.net/qJHyL/1/ (and fancy delete icon)
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
then you would use
$(".box").bind("click", function() {
$(this).fadeOut(500, function() {
// now that the fade completed
$(this).remove();
});
});
Example in JSBIN
Related
I have a function which, when clicking on a link with the class .show-more, opens up the div with the class .productinfo. Now, it also adds a class to the link itself (.active) - the problem what I have is that I have a few links on this page with the same class. I've managed to only open up the correct .productinfo when clicking on it, but the class will be added to every link nonetheless. Also tried adding the following to the code but that did not work:
$(this).find('show-more').toggleClass("active");
My structure is the following:
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
jQuery(document).ready(function($) {
$('body').on('click', 'a.show-more', function(e) {
e.preventDefault();
$('.show-more').toggleClass("active");
var $this = $(this).parents('.product');
$this.find('.productinfo').toggle(0, 'slide')
});
});
Why not:
$('a.show-more').on('click', function(e)
and then
$(this).toggleClass("active");
I am writing a userscript using jQuery. I am trying to change the content of the divs with the class foo so it contains bar. With a static list of elements, I can do it using $(document).ready():
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">foo</div>
<div class="foo">foo</div>
</div>
However, I can't figure out how to replace the text of divs that get inserted dynamically:
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
Using $(document).ready() only works on the statically inserted divs, as those are the only ones there when the document is loaded.
How can I make the divs that are dynamically added to #content get their content changed to bar?
Note sure why you don't just change the $("<div></div>").text("foo") to $("<div></div>").text("bar");
But the code in your $(document).ready() only runs once.
so do something like this.
// The userscript
$(document).ready(function() {
footext();
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
footext();
});
function footext() {
$(".foo").text("bar");
}
Demo
// The userscript
$(document).ready(function() {
footext();
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
footext();
});
function footext() {
$(".foo").text("bar");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
You can also use DOMNodeInserted
$('body').on('DOMNodeInserted', '.foo', function () {
$(this).text("bar");
});
Demo
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
});
$('body').on('DOMNodeInserted', '.foo', function () {
$(this).text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
Add this
`$(".foo").text("bar");`
inside the button click function.
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
$(".foo").text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
I have four div of same class, but I want to access each div when clicked only by class name for any further action only by java script/Jquery
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
Try using jquery class selector with on click handler
$(function() {
$('.myclass').on('click', function() {
alert($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
You can use the following jquery:
$(".myclass").click(function(e)
{
var div = this;
});
I have a few divs set up like so:
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
in jquery i am doing
$('.parent_options').each(function() {
$(this).click(function() {
});
});
right now $(this) is giving me the parent_div that i clicked on and I need to be able to move down to the children_div and hide the entire children_div. Any ideas. I know in prototype i used a down function but not sure if jquery has it.
If you want to hide .children_div after clicking on .parent_div use
$('.parent_div').click(function() {
$(this).siblings(".children_div").hide();
});
Demo here
$('.parent_div').each(function() {
$(this).click(function() {
$(this).next().hide();
});
});
If you're binding the function to all .menu-options, there's no need for each(). This should work if I understood your query properly:
$('.parent_div').click(function() {
$(this).siblings('.children_div').hide();
});
try .next()
$( this ).next( ".tb-contents'" ).show();
This will work.
Thanks
I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
<div id="replace" style="visibility:hidden;">Bla Bla Bla</div>
Here is what I've got so far:
$('#1').on({
mouseover: function(){
$('#2').replaceWith(jQuery('#replace'));
},
mouseleave: function(){
$('#2').replaceWith(jQuery('#2'));
},
click: function(){
$('#2').replaceWith(jQuery('#replace'));
$('#1').off('mouseleave mouseover');
}
});
Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?
jsBin demo
<div class="box">This is DIV #1 :) </div>
Add a class .box to all your 8 elements and do:
jQuery(function($){
var replaceText = $('#replace').text();
var memorizeText = '';
$('.box').on({
mouseenter: function(){
memorizeText = $(this).next('.box').text(); // memorize text
$(this).next('.box').text(replaceText);
},
mouseleave: function(){
$(this).next('.box').text( memorizeText ); // restore memorized text
},
click: function(){
$(this).next('.box').text( replaceText );
$(this).off('mouseleave mouseenter');
}
});
});
Like this?
<div class="page">
<div class="content">Bla bla bla</div>
</div>
<div class="page">
<div class="content">Some more text</div>
<div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
<div class="content">Hello there</div>
<div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
<div class="content">Test</div>
<div class="content-alt" style="display: none;">Hi!</div>
</div>
JS
$('.page').on({
mouseover: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').hide();
nextPage.children('.content-alt').show();
},
mouseleave: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').show();
nextPage.children('.content-alt').hide();
}
});
Original answer
If I understand your question correctly, you can try this:
HTML
<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>
<div id="hidden" style="display: none">This is some hidden text</div>
JS
$('#page1').on({
mouseover: function(){
$('#page2 .name').hide().after($('#replace'));
},
mouseleave: function(){
$('#hidden').hide();
$('#page2 .name').show();
},
click: function(){
$('#hidden').hide();
$('#page2 .name').show();
$('#1').off('mouseleave mouseover');
}
});
But I'm not really sure why you are trying to do this. Are you just trying to show and hide some text on mouse over?
Don't have a lot of data on what your HTML structure looks like, the purpose of this, etc. But the following is an example structure that would achieve what you're question refers to -- and it's a bit shorter as writing out a specific handling for every div when they all do the same thing makes it a bit unnecessarily long. Code is below, working example also in this jsfiddle
HTML
<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>
CSS
#replacementText {
visibility: hidden;
}
JQuery
$('.replace-me').mouseover(function() {
$(this).text($('#replacementText').text());
});
$('.replace-me').mouseout(function() {
$(this).text("DIV "+$(this).attr('id'));
});