We Keep Coding

Remove particular dynamic div using jQuery

I am using append to append some input data with div. After some appending, I have data as below :
<div id="holder">
</div>
var data = "<div id=1><input type='text' id='test_1' name='test_1'></div><div id=2><input type='text' id='test_2' name='test_2'></div>"
$("#holder").append(data );
I am appending data using append. Now, I want to remove particular div based on id.
For i.e. if id is 1 then remove this row. <div id=1><input type='text' id='test_1' name='test_1'></div> and like that for all.
I tried $("#holder").remove(), but it will remove all data. I want to remove particular div then what to do ?

yes $("#holder").remove() will remove everything because this is the parent div consisting of all child divs(like div id=1)
Its a bad practice to give as numericals like the way you are doing(id=1,id=2 etc)
Append some alphabets along with number like id=a1,id=a2....
to remove a particular div
try
$("#a1").remove()
from the comments above you have said that you will get the id from click
so try like below
$(selector).click(function(){
var id=//get the id of the div
$("#a"+id).remove()
});

I think this could work:
var theId = document.getElementById("1");
theID.remove();

How can I extract the className from a span that is selected using javascript?

I have this HTML:
<span class="redColor">gold</span>
And when I have the text selected that is within the span tags, I need to be able to somehow extract the className from the span using javascript. I don't know anything about the class in advance, only that it will be in a span, and the text will be selected.

I assume you mean Text selected with the mouse or the keyboard? You can access that with
window.getSelection()
Then you can work your way up the DOM tree:
window.getSelection().anchorNode.parentNode.className
See https://developer.mozilla.org/en-US/docs/Web/API/Selection.anchorNode for documentation of the Selection class

Use className property.
Example:
var x = document.getElementsByTagName('span');
document.write("Body CSS class: " + x.className);

How to select a textarea by it's type and parent div with jQuery?

I need to select a textarea with jQuery and my selector code isn't working.
This is what I have:
HTML:
<div id="textareaContainer">
<textarea>
this is text
</textarea>
</div>
JS (onload):
jQuery("#textareaContainer > input[type=textarea]").val("");
JSFiddle: http://jsfiddle.net/EVvfT/
When the page is loaded, the textarea's value is not overwritten. Unfortunately I cannot set the id or class of the textarea, which is why I need to select it as the child of the div it's in.
How do I get this to work?

It's simply textarea:
jQuery("#textareaContainer > textarea").val("");
jsFiddle here.
If there's more than one <textarea>, you could use first() to get the first, last() to get the last or eq() to select any others in between.

To only grab the first one:
jQuery("#textareaContainer > textarea:first").val("");

You can select it like:
$('textarea > #parentId').val()
Alternatively:
$('textarea > div[class="something"]').val()

If you got the textarea and want to test to see if the parent is what you want it to be you can do:
var $textarea = $('#textarea'),
$parent = $textarea.parent(),
isGoodParent = $parent.is('#textareaContainer');
// isGoodParent is true if the textarea's parent matches the selector `#textareaContainer`

inserting a variable on style tag

I need to change the color of the text based on the drop down list selection.
<select id="room2">
<option>#0808cf</option>
<option>#0E9E26</option>
</select>
<input type="text" id="txtColor">
John: <p style="color:#0808cf" > test </p>
jquery
$('#colors').change(function(){
$('#txtColor').val($("#colors").val());
var fontColor = $('#txtColor').val();
});
I dont want the change to be in the css cause the select id will not be constant. I want it to be inserted in the p style tag. And also i need the text to be John: test to be in one line. I tried this but not working. Thank you.
<p style="color:"+fontColor+" > test </p>
demo: http://jsfiddle.net/kX3EN/

Try - http://jsfiddle.net/kX3EN/7/
$('#colors').change(function(){
$('p').css( 'color', $(this).val() );
});

If you want your "John: test" to be on the same line, you need to:
Change the p (block-level) to something like a span (inline) or
Force the p to act as inline with css (display: inline).
Using jQuery, you need to use the css() function to change the style attribute of an element. Like so:
$('selector for element you want to change').css('color', $("#your-select-element").val());
You'll probably put this in an event handler for your select:
$("select#colors").change(function() {
$("span.changemycolor").css('color', $(this).val());
// 'this', in this case, is your select element
});

got it working by placing the tag after my html code filter. So everytime I append a message will be stored as variable and read as JS when the var is sent to the websocket send method. Thank you

jquery selector - Select value not inside another nested tag

Is it possible to select the value of a tag which is not inside another nested tag?
For example in the following code I want to get ' Text I want to select' from $('#example').
<td id="example">
<a> Text I don't want to select</a>
<span> Other text I don't want to select</span>
Text I want to select
<anyOtherTag> Other text I don't want to select</anyOtherTag>
</td>
Thanks.

You can use .contents() and .filter() down to text node types (nodeType == 3), like this:
var text = $("#example").contents().filter(function() {
return this.nodeType == 3;
}).text();
alert($.trim(text));
You can try it out here. since .text() gets all text nodes, including the other whitespace, you probably want to $.trim() (since IE<9 doesn't have String.trim()) the result like I have above.