I have written this code by using some basics. I simply wanted to remove the image that I have created by using the function Generate() by a button. I have written the following code to remove the image generated. Please help me.
Please note that I have linked my button with the function Reset1(). Can someone give me the code to do the following please.
function Generate()
{
var image=document.createElement('img');
var div=document.getElementById('flex-box-gen');
image.src="https://thecatapi.com/api/images/get?format=src&type=gif&size=small"
div.appendChild(image);
}
function Reset1()
{
document.getElementById('Generate').remove();
}
You could either assign an id to your image element and use that to remove in your second function:
function generate() {
var image=document.createElement("img");
image.id = "image-01";
...
}
function reset() {
var image = document.getElementById("image-01");
var parent = image.parentNode;
parent.removeChild(image);
}
Or if there is nothing else in your containing div element you could just empty all elements from it:
function reset() {
document.getElementById("flex-box-gen").innerHTML = "";
}
getElementById will query a DOM element, not a javascript element.
What you can do, supposing you have only one img in your flex-box-gen is:
var imgs = document.querySelectorAll('#flex-box-gen img')
if(imgs.length > 0){
imgs[0].remove();
}
With a null-check in case the image was already removed
image.setAttribute('id',"Generate");
Add this line in generate function.
Related
The two functions in the javascript are both having a statement-
$('#'+key).html(data)
funtion data(data) {
$('#'+key).html(data)
}
funtion data2(data) {
$('#'+key).html(data)
}
which is essentially replacing the value of the key. I don't want the replacement but basically add to the same data and then render the new value.
I am very new to Javascript- will be glad if someone can point in the right direction.
Thanks in advance.
I don't want the replacement but basically add to the same data
Use append instead of html
$('#'+key).html(data)
funtion data(data) {
$('#'+key).append(data)
}
funtion data2(data) {
$('#'+key).append(data)
}
Without JQuery:
If you want to add just text, use appendChild:
function addText(divID, text) {
document.querySelector("#"+divID)
.appendChild(document.createTextNode(text));
}
/** TEST **/
var number = 1;
var intervalID = setInterval(addMore, 500);
function addMore() {
addText("appendHere", "Text #"+(++number)+" ")
// do not add infinitelly
if(intervalID>20)
clearInterval(intervalID);
}
<div id="appendHere"></div>
If you want to append HTML, just alter the code a bit:
function addHTML(divID, html) {
var fragment = document.createElement("span");
fragment.innerHTML = html;
document.querySelector("#"+divID)
.appendChild(fragment);
}
As per first comment of #gurvinder372
funtion data(data) {
$('#'+key).append(data)
}
funtion data2(data) {
$('#'+key).append(data)
}
This will help you to understand data handling on HTML elements using JQuery methods.
I have written the code shown below. I am trying to position the element "h45" above the "age". Somehow, it does not work and I get the following error : "The new child element contains the parent." Does anybody know why this happens and how I could fix it? I am new to JavaScript and I dont understand what I am doing wrong. Thank you all in advance!`
var lastName=document.getElementById("lastName");
var firstName=document.getElementById("firstName");
var age= document.getElementById("alter")
age.addEventListener("blur",showage,false);
function showage()
{
if (/[^0-9]/.test(age.value)) {
var h45 = document.createElement("h4");
var txttt = document.createTextNode("Bitte geben Sie nur Nummern ein");
h45.appendChild(txttt);
age.parentNode.appendChild(h45);
h45.insertBefore(h45,age);
h45.style.color = "red";
return false;
}
else {
return true;
}
}
The problem is in this row
h45.insertBefore(h45,age);
You should do something like:
h45.parentNode.insertBefore(age, h45);
you are inserting h45 inside h45
h45.insertBefore(h45,age);
insertBefore Syntax:
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
so your variable age is probably a div container representing an alert and you already have insert h45 inside age with this code line
age.parentNode.appendChild(h45);
The problem in h45.insertBefore(h45,age);
You cannot append the same element inside itself. It'll create cyclic dependency.
h45.parentNode.insertBefore(age, h45);
See Fixed
https://plnkr.co/edit/EDkvssWMAcDV0enT2hL2?p=preview
I've dinamically created a div with the code below:
typebox.innerHTML += "<div id='idtypebox' class='typebox'><img id='typeImg' width='30px' height='30px' src="+d[o].src+"></div>";
My intention is to remove completely the innerHTML I created, by changing the innerHTML that had created the img and if change the form A to B, those images will be removed.
function SelectCheck() {
var select_val = $('#Check').val();
// using this to remove typeimg
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove);
if (select_val) {
ajax_json_gallery("Img/"+select_val);
}
return;
}
$(document).ready(function() {
$("#Check").change(SelectCheck).change();
});
I tried this code by on button and it works, but if I put in jQuery selection I get an error
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove);
Why not just :
$("#typeImg").remove();
And the complete code :
function SelectCheck(){
var select_val = $('#Check').val();
// using this to remove typeimg
$("#typeImg").remove();
if(select_val){
ajax_json_gallery("Img/"+select_val);
}
return;
}
jQuery(document).ready(function($) {
myVar=$("#d1 [href]").html();
var href = $(myVar).attr('src');
$("#d1").html('');
$("#d1").html('<img src="'+href+'" class="images_responsive_mode">').removeAttr("href");
});
</script>
this is one of the script which i created for remove the class assigned by wordpress and to assign new class for responsive image , if it useful for you do this !
you can use childNodes to remove the innerHtml
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove.childNodes[0])
I want to check if a specific hidden div exists and if not create one.
I do:
function myFunction(somestring) {
var myHiddenDiv = jQuery('<div id="js_method" style="display:none">');
...
myHiddenDiv.append(somestring);
}
The problem is this seems to create a new hidden div every time the function is called on the same page.
the hidden div just seems scoped to the function, whereas I want it scoped to the page.
Any tips.
tips please
Thanks.
Use length property:-
function myFunction(somestring) {
var myHiddenDiv;
if($("#js_method").length == 0){
myHiddenDiv = jQuery('<div id="js_method" style="display:none">');
$("body").append(myHiddenDiv);
}else{
myHiddenDiv = $("#js_method");
}
...
myHiddenDiv.append(somestring);
}
Why not just check by ID?
if (jQuery("#js_method").length == 0) {
var myHiddenDiv = jQuery('<div id="js_method" style="display:none">');
...
myHiddenDiv.append(somestring);
}
I just try a tutorial here on how to upload multiple form - http://www.maheshchari.com/multifile-upload/
Basically, it have a link to add a new input when it clicked. My question is, how to add another link to REMOVE the input?
Thanks for helping :)
You can remove an element that you know the ID of using:
function removeById(id) {
var element = document.getElementById(id);
// A bit of robustness helps...
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
}
please update you function add_file_field to
var file_counter = 0;
function add_file_field(){
file_counter++;
var container=document.getElementById('file_container');
var file_field=document.createElement('input');
file_field.name='images[]';
file_field.type='file';
file_field.id='file_'+file_counter;
container.appendChild(file_field);
var remove_field = document.createElement('a');
remove_field.href = "javascript:removeById('"+'file_'+file_counter+"');removeById('"+'remove_field_'+file_counter+"');";
remove_field.innerHTML = "Remove')";
remove_field.id = 'remove_field_'+file_counter;
var br_field=document.createElement('br');
container.appendChild(br_field);
}
this create a
and also add function removeById in you javascript so that when any one clicks on remove button then the file type field will remove. which is posted in previous post also
function removeById(id) {
var element = document.getElementById(id);
// A bit of robustness helps...
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
}
It's very simple,
document.getElementById("_id").parentNode.removeChild(document.getElementById("_id"));