I'm trying to create a vanilla javascript that creates one div or more when clicking on a specific link. When said div has appeared I want to be able to remove it by clicking on that div.
So far I've successfully made it so that a div is created when clicking a link.
The HTML:
<div class="content">
Click me!
<div id="target"></div>
</div>
And the JavaScript:
(function() {
'use strict';
var createTarget = document.getElementById('target');
var link = document.getElementById('create-div');
function createDiv() {
var content = '<div id="clickme"><div class="main"><div class="secondary"></div></div></div>';
createTarget.innerHTML = content;
}
link.addEventListener("click", function() {
createDiv();
});
})();
What I can't figure out is how to remove the div by clicking on it after it has been created? Bear in mind that I am new and trying to learn vanilla JavaScript for now. I know about jQuery and all the other libraries, but I'd rather just learn the basic JavaScript to begin with.
Through the power of Google I've found out about "removeChild" but I am yet to find out how to get it to work on a div by clicking it.
All help is appreciated!
Try this out :
createTarget.addEventListener("click", function() {
var elem = document.getElementById('clickme'); // to get the id of the div that dynamically created
elem.parentElement.removeChild(elem); // function removes specified child node of your specified element.
});
see this working FIDDLE
Related
I'm trying to make my webpage alert text when an element has been double-clicked using jQuery. Here's my JS:
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
And HTML:
<div class="dashboard-acrs-map-div" id="dashboard-acrs-map"></div>
Am I doing something wrong? Because the alert doesn't come up...
Note: It seems to be working UNLESS the element (#dashboard-acrs-map) is created using JS. How can I fix this?
That pretty much has to be your selected element not existing. It is possible that the script runs before the element is loaded. Place the script at the end of the body for example to make sure this is not the case.
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard-acrs-map">
Element
</div>
Dynamic element creation example:
document.querySelector("button").onclick = () => {
var element = document.createElement("div");
element.id = "double-click-me"; // Who cares though?
element.textContent = "Double Click Me";
element.ondblclick = () => alert("Double!"); // Hook up double click here.
document.body.appendChild(element);
};
<button>Create Double-Clickable</button>
(Furthermore, i believe that jQuery should never be used.)
I'm trying to code a jQuery script that adds some functionality to a button.
Basically when I click a button (ex: Settings), I want to add that specific text (ex: Settings), to a different div (the div is predefined with css rules), just like how a google chrome tab works.
$(document).ready(function() {
var wButtons = document.getElementById('#wrapper');
$(".buttonSettings").click(function() {
var domElement = $('<span>Settings</span>').appendTo(wButtons);
$(this).after(domElement);
});
});
The code works partially, but it won't append to #wrapper, just under the .buttonSettings div. Also I should mention that I have a predefined number of tabs (max 6).
Thank you!
If you want to append html string into element, use jquery appendTo() method like this.
$("button").click(function() {
$("<span>Span content</span>").appendTo("#wrapper");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Append</button>
<br/><br/>
<div id="wrapper">Wrapper content</div>
Remove # from getElementById and in this case this == button,
demo: https://jsfiddle.net/
$(document).ready(function() {
var wButtons = document.getElementById('wrapper');
$(".buttonSettings").click(function() {
wButtons.innerHTML += '<span>BALALALALA</span>';
});
});
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
how to create click button in pure/native JavaScript without using any html tag and css? This button, when the user click it there's a confirmation box will appear then, when the user click the Ok option, there's a popup window will appear.
I have already code in popup window and confirmation box. Here:
if (confirm("Go?") == true) {
popupWindow = window.open('/filename.htm', "name", windowFeatures);
popupWindow.focus();
} else {
test1= "";
}
I want to display the click button under of:
<div class="activityHeaderPanel">
But, I don't have an access or privilege to change or edit the entire html.
Please help me. I'm not really a programmer. Thank you.
var test = document.getElementByClass("activityHeaderPanel");
function whatClicked(evt) {
alert(evt.target.id);
}
test.addEventListener("click", whatClicked, false);
You can use the native DOM API to create document nodes and attach events, using pure Javascript and no HTML.
var myDiv = document.createElement('div');
myDiv.className = 'activityHeaderPanel';
myDiv.onclick = function(){
if(confirm //...
}
To attach the div you created to the existing document you need to find its parent node and use appendChild:
//this will depend on your particular use case. For example, if the parent element is a
// <div id="theParent">
var parentNode = document.getElementById('theParent');
parentNode.appendChild(myDiv);
I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API