Remove specific lines on button click - javascript

If I have the following:
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<input type="submit" value="Submit" />
How to make (div test1 and test3) removed upon clicking on the submit button?

Try this:
var button = document.querySelector('input[type="submit"]');
button.onclick = function(event) {
event.preventDefault();
var ids = ['test1','test3'];
var count = ids.length;
while(count--) {
document.getElementById(ids[count]).remove();
}
};
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
<input type="submit" value="Submit" />

Using jQuery, you should have something like this jsFiddle :
$(document).ready(function(){
$('#submit-btn').click(function(e){
e.preventDefault();
$('#test1, #test3').remove();
})
});

You could try with JQuery hide accordian, here's an example:
Put this in your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#1, #3").hide();
});
$("#show").click(function(){
$("#1, #3").show();
});
});
</script>
And this n your body tag:
<div id="1">If you click on the "Hide" button, I will disappear.</div>
<div id="2">If you click on the "Hide" button, I will disappear.</div>
<div id="3">If you click on the "Hide" button, I will disappear.</div>
<div id="4">If you click on the "Hide" button, I will disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

Related

can we write script for the button which is inside the popover?

I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>

Replacing Div content with another using jQuery

I have a div named Groupz and another div named vegasDetailz
Now i want, when i click on the button that is lying in first div , first div should disappear and the second div should take it's place for this purpose i have written the following jquery code
$(document).ready(function() {
$("button").click(function() {
$("#vegasDetailz").replaceWith("#Groupz");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>
But it is not working for me. Any ideas ?
Note: I am using php laravel 5.3
You are trying to click on $("button") but you have no button, so use $(".getstart"), since it is the id of your input.
Second your .replaceWith("#Groupz") are just trying text into the div, you have to get the element first before you can replace the entire element. Like .replaceWith($("#Groupz"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
});
});
</script>
You can remove submitBTN getstart from the div vegasDetailz then add new one to the second div Groupz:
$(document).ready(function() {
$(".getstart").click(function(){
$(".getstart").remove();
$("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>"));
});
});
#vegasDetailz {
background-color: grey;
width:500px;
height:60px;
}
#Groupz {
width:500px;
background-color:pink;
height:60px;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
You need to use the name as you selector then use like this input[name=button] if you want to use class as your selector then use .submitBTN.
$(document).ready(function() {
$("#Groupz").hide();
$(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
$("#vegasDetailz").hide();
$("#Groupz").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
Hai Another div
</div>
If you just want to show & hide the div on the button click, then try this code:
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz" style="display:none;">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").css('display','none');
$("#Groupz").css('display','block');
});
});
</script>
Just make the div id named Groupz hidden by default, if you don't want to show the second div in default state.
I hope, it may be helpful to you.

JQuery issue with onclick slide up function

I have script for slideup and slide down function in jquery, and a button each of them.
both are working fine until i thought of giving the slide up from by letting the user click anywhere in the site.. i.e., when user clicks slide down button its slides down and when he click anywhere on the screen later the content slides up.
unfortunately its having a small problem of auto sliding down and sliding up when i hit slide down button.
the script as follow::
<div id="a" name="a">
</br>
<small><p id="date2"><?php echo $row2["date"]; ?></p></small>
<p><B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
});
</script>
Any help is Appreciated..
It slides back up straight away because both your event handlers are executing - by definition a click on your show element is also a click on the window.
To stop this happening you need stopPropagation
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
e.stopPropagation(); // <-- here
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
//console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" name="a">
<br>
<small><p id="date2">date here</p></small>
<p><big><font color= #ba4a00> A:</font></big> <small>answer here</small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>

show and hide element on mouse over jquery

I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.
<div class="mybooks">
<div class="divbutton">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia">
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia">
</div>
</div>
".$Tri_IMAGE."
".$Tri_CAPTION."
</div>";
}
?>
</div>
<!--close accordion-->
</div>
<script>
$( ".mybooks" ).mouseenter(function() {
$('.divbutton').show();
});
$( ".mybooks" ).mouseleave(function() {
$('.divbutton').hide();
});
</script>
Just hide the div first
//hide the div here
var $btn = $('.divbutton').hide()
$(".mybooks").mouseenter(function () {
$btn.show();
});
$(".mybooks").mouseleave(function () {
$btn.hide();
});
Demo: Fiddle
Or use a css rule to hide it
.divbutton {
display:none
}
Demo: Fiddle
This fiddle shows the buttons hiding (display: none;) when you hover over them. The thing is, you can't have them reappear once they're gone. There is nothing to hover over...
<div class="divButtons">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia" />
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia" />
</div>
JavaScript:
$('#edit_trivia').hover(function(){
$(this).css('display', 'none');
});
$('#delete_trivia').hover(function(){
$(this).css('display', 'none');
});
You should put your javascript code in this function:
$( document ).ready(function() {
//your code
});
Your code: http://jsfiddle.net/VGJ5u/

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

Categories

Resources