My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of the whole div:
<script>
function remove(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
</script>
<div id="intro" class="jumbotron">
<h1>Your Offline Web Dictionary!</h1>
<p class="lead">
<div class="controls">
<input class="span7 " type="text" placeholder=" " name="key">
</div>
<div>
<button class="btn btn-large btn-success" onclick="remove(intro)">
Dictionary Search
</button>
</div>
</div>
JSFiddle
The problem is that the button element has a remove property so that is called instead of your remove function. And also the string thing.
<button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);">
Search
</button>
http://jsfiddle.net/HMEVd/76/
Two problems. Firstly, intro should be a string, not an identifier, so use remove('intro') in your onclick.
Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:
element.parentNode.removeChild(element);
intro should be sent to the function as a string rather than a variable, i.e, 'intro'
Also, you must rename your function, for example, removeById instead of remove. Then it works perfectly.
The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into it.)
function removeById(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
...
<button class="btn btn-large btn-success" onclick="removeById('intro')">
Related
I'm trying to delete dynamically created elements each with their own delete button. This is the element that gets added with every button click. When the delete button of an element gets clicked I want that specific element to be deleted.
I use the following code to append the element:
$("#addsitem").click(function () {
$("#holdsitems").append('myFunction');
});
This is how I try to remove it:
$("#item").on("click", "#deleteitem", function() {
$("#item").remove();
});
I can only delete the elements that haven't been added.
This is all the relevant HTML code (myFunction) of the element:
<div id="item" class="itemdiv">
<form>
<div>
<div id="deleteitem">
<input type="button" name="Delete Button" value="Delete">
</div>
</div>
</form>
</div>
I'm rather new to jQuery and this is giving me headaches. Would appreciate it lots if someone could help me out!
You can use classes and the command .closest("selector") where this moves up the DOM tree until it finds the first element that matches that selector, you can then remove this.
You shouldn't be adding an id dynamically, unless you are adding an indices so that they are unique.
Demo
// Add new item on click of add button
$("#addsItem").click(function(event) {
// Stop submission of form - this is not necessary if you take it out of the form
event.preventDefault();
// Append new form item
$("#holdsitems").append('<div class="item-wrapper"><button type="button" class="deleteItem" >Delete</button></div>');
});
// Add DYNAMIC click event to class .deleteItem
$(document).on("click", ".deleteItem", function() {
// Move up DOM tree until first incidence of .item-wrapper and remove
$(this).closest(".item-wrapper").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item" class="itemdiv">
<form>
<div id="holdsitems">
<button id="addsItem">Add Item</button>
<div class="item-wrapper">
<button type="button" class="deleteItem">Delete</button>
</div>
</div>
</form>
</div>
I'm trying to use JavaScript parameters in a function, but I'm not writing the syntax correctly.
This function is supposed to revert information in objects with the aa tag into whatever is specified with ba.
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction(demo, My First Javascript)">Click Me!</button>
Add single quotes around the inputs to your function:
Javascript:
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
html:
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
here's a link to a codepen.io demo:
https://codepen.io/167141162/pen/Vrgvbg
Strings in JavaScript must be wrapped in either "" or ''. In your example, JavaScript will think that you are trying to pass a variable (or a function) called demo for the first argument, and the second one (My First Javascript) will throw a SyntaxError.
So, this will work:
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
Wrap your string parameters in single quotes
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
Your parameter << demo >> must be in single quotes, because in the js file the parameters take it as strings
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?
I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}
I have a button
<script>
function changeMap() {
container.setMap(oMap);
}
</script>
<button onClick="changeMap"> Click here </button>
The content of container is correct. it has a control.
The set Map property exists from what i see in the console.
When the page loads all is correct. but when i click the button the property doesn't set OR the content of the page doesn't change.
Do i need to load some other way? Thank you in advance :)
Change your HTML to this:
<button onclick="changeMap()">Click here</button>
The attribute is called onclick not onClick, Apparently html attributes are fully case insensitive, so both will work.
However you also need parentheses after the name of the function.
<button onclick="changeMap(event)">Click Here</button>
here the event is a browser global that allows us to pass an event to the handler. In your case, you aren't using the event, so it is not necessary.
Please also note that if you add the event in javascript, you will not use the parentheses.
I have included a demo of three different ways to add a click handler to a button below.
function log(message){
var line = document.createElement('div');
var text = document.createTextNode(message);
line.appendChild(text);
messages.appendChild(line);
}
function handleClick(e){
log("Click from " + e.target.id);
}
// add an event listener to b2
b3.onclick = handleClick;
// add an event listener to b3
b4.addEventListener('click', handleClick);
<button onclick="handleClick(event);" id="b1" >Button 1</button>
<button onClick="handleClick(event);" id="b2" >Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>
<div id="messages">
</div>
i want to clone a element and insert on another position in the DOM. (So actually i just want to 'move' it).
On document ready some events get binded in a Plugin (which i don't want to edit) to a child element of the element i want to clone.
When i clone the element like this:
$('.FSGD-logo-slider-element-info').each(function(){
$number = $(this).attr('data-trigger');
$element = $(this).clone(true, true);
$('.FSGD-logo-slider-element[data-index="'+$number+'"]').after($element);
$(this).remove();
});
The element is cloned, but they don't react on any Events.
When i do it like this (Have a look on the third line with the live-method):
$('.FSGD-logo-slider-element-info').each(function(){
$number = $(this).attr('data-trigger');
$element = $(this).live().clone(true, true);
$('.FSGD-logo-slider-element[data-index="'+$number+'"]').after($element);
$(this).remove();
});
It is working. But the live method is removed since jquery 1.9, because of that i also get an error output.
I can't explain why that code is working and i don't have any idea to get it working without the live method.
I hope someone is able to help. That would be awesome.
i want to clone a element and insert on another position in the DOM. (So actually i just want to 'move' it).
Then just move it:
$('.FSGD-logo-slider-element-info').each(function(){
var $number = $(this).attr('data-trigger');
$('.FSGD-logo-slider-element[data-index="'+$number+'"]').after(this);
});
Example:
// Hook an event on a child of the info elements
$(".FSGD-logo-slider-element-info input").on("click", function() {
alert($(this).parent().attr("data-trigger"));
});
// Move the elements
setTimeout(function() {
$('.FSGD-logo-slider-element-info').each(function(){
var $number = $(this).attr('data-trigger');
$('.FSGD-logo-slider-element[data-index="'+$number+'"]').after(this);
});
$("p").remove();
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="FSGD-logo-slider-element-info" data-trigger="1">
Info One <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="2">
Info Two <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="3">
Info Three <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="4">
Info Four <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element" data-index="1">
Element One
</div>
<div class="FSGD-logo-slider-element" data-index="2">
Element Two
</div>
<div class="FSGD-logo-slider-element" data-index="3">
Element Three
</div>
<div class="FSGD-logo-slider-element" data-index="4">
Element Four
</div>
<p>Elements will move after a second</p>
Side note: I added var in front of $number = ... above. Without it, your code was falling prey to The Horror of Implicit Globals (unless of course it was declared in a parent scope, but this is clearly used as a local, so that wouldn't make much sense).