i have created a input text box from javascript with the following code in runtime
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id='tbox';
textbox.value=document.getElementById("texts"+i).value;
document.getElementById('frm').appendChild(textbox);
How can i delete the same textbox in runtime?
In javascript, you can not directly remove the element. You have to go to its parent element to remove it.
var elem = document.getElementById("tbox");
elem.parentNode.removeChild(elem);
document.getElementById('frm').removeChild(document.getElementById('tbox'));
try remove()
so assuming I've got the right one:
document.getElementById("texts"+i).remove()
If not the above... then make sure you give it an id and choose it by that before remove()ing it
Possible duplicate: Remove element by id
However you can use the following solution:
You could make a function that did the removing for you so that you wouldn't have to think about it every time.
function remove(id)
{
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
Try this:
var temp = document.getElementById('texts'+i);
temp.parentNode.removeChild(temp);
Related
How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/
I have a function called "StartMsg"
that I want to add text to a div element with the id "Screen". But sadly I known only basic JS, here is what I have so far;
function StartMsg() {
document.getElementById('Screen').innerHTML = "The game was created.";
}
But it overwrites all of my previous text (Yes I know it's supposed to do that, I'm trying to find a way to not overwrite but add!).
Use textContent and con-cat the new string
document.getElementById('Screen').textContent += " The game was created.";
JSFIDDLE
You can try createTextNode() method,
var your_div = document.getElementById('Screen');
var your_text = document.createTextNode("text added");
your_div.appendChild(your_content);
Using innerHTML will remove all listeners within the div element
You can also use the append method.
For example:
$('variable').append('some text');
I have some code for Javascript using jQuery, and I've been wondering how to fix an element of it.
var dataGiven = +$("span.cost-in-usd:first-child").text();
However, the span tag is:
<span class="cost-in-usd" data-se="product-usd-value">42</span>
Is there a way of modifying my code in order for it to recognise data-se?
Yes, use data.
var datase = $('.cost-in-usd').data('se');
Some links;
http://api.jquery.com/jquery.data/
Here's a jsfiddle
The following will return the value of attribute
$('.cost-in-usd').attr('data-se');
I have a form like so:
<form action='word.php' name = 'searchbox'>
<input type='text' name='word' id = 'searchbox' value = 'default'>
</form>
In my body I have:
<body onLoad="searchbox.word.focus()">
You can see the fiddle here:
http://jsfiddle.net/WEZ7S/
What I'm trying to achieve is just have a blinking cursor at the end of "default", but instead the whole word gets selected instead.
Surprisingly Google hasn't been able to find any solutions. How would I do this?
You can get around this by resetting the .value property of the element:
searchbox.word.focus();
searchbox.word.value = searchbox.word.value;
There are also less hacky solutions: Use JavaScript to place cursor at end of text in text input element
Demo: http://jsfiddle.net/WEZ7S/1/
From a previously answered question: https://stackoverflow.com/a/13371452/1238887
Here's a nifty little trick:
$(document).ready(function() {
var $field = $("#searchbox"),
oldVal = $field.val();
$field.focus().val('').val(oldVal);
});
DEMO: http://jsfiddle.net/X7Y8S/
Use setSelectionRange (Chrm, FF):
var len = searchbox.word.length;
searchbox.word.focus();
searchbox.word.setSelectionRange(len, len);
I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.
If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});
Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)
If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}
This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.