We Keep Coding

Javascript DOM elements hide class and the element not present are same?

I am currently working on a project where most of the code has been written by someone else . I was supposed to do some slight modifications in the existing script to incorporate changes in a new file. I came across a situation where it was very confusing . The scenario is as cited below:
I have an element named as complextabs and it is being used for almost all the pages, except for the one which is being created newly. The situation is there is a code snippet that is written as $('.complextabs').hasClass('.hide'). this incredibly returns the same as when the element complextabs is not even present in the page. Can someone please throw some light on this
And yeah, I am working on Backbone.js . Has this got something to do with the use of Backbone.js
Any suggestion and advice is highly appreciated

Nope, that has nothing to do with the use of Backbone.
Consider the following:
$('.asdasda').hasClass('hide')
This will return false, and it should return false because $('.asdasda') does not return any results. Just running that will yield a JQuery wrapper over an empty list and since there are no elements then obviously there's nothing in there with the css class hide.
If you want to check that there is an element with both the complextabs and the hide class then use $('.complextabs.hide').length.

Replace or even better remove inline styles with Javascript or jQuery?

Before I posted this question I searched Google (and Stackoverflow) and though there are quite some results for this, I simply don't understand most offered solutions.
Problem I am experiencing is that I use a script which fetches RSS feeds from our main website. This works perfectly, however it also displays the used inline styles, which are being used sometimes. Ofcourse this messes up the way things looks and looks rather, lets say, unprofessional.
I checked the source of what's being loaded and as far as I can tell, the main culprit is an inline style called:
<span style="font-family: verdana,geneva;">text</span>
Less frequent are the following ones (but still rather see them go as well):
<em>text</em>
<strong>text</strong>
<em class="moz-txt-slash">text</em>
<span class="moz-txt-tag">text</span>
Can these all be removed with jQuery or Javascript? Apparently it's possible, but I don't know how. And should I put everything in a seperate div-container?
I can live with the unnecesarry 'p's and 'br's, but rather see the other ones removed.
Anyone out there who is willing to help me with this? My gratitude!
//edit
Thank you all for the quick responses... Highly appreciated.
I use a script called MagicParser to fetch those RSS feeds. I don't know much about coding like PHP, jQuery and Javascript, but I will try to use the solutions. I hope it will work. The first one didn't though :/

You can easily target all elements that have inline styles with $("[style]") and remove the styles with .removeAttr("style"):
$("[style]").removeAttr("style");
If you have a DOM node or jQuery collection and want to remove styles from its descendants, simply use .find("[style]").removeAttr("style") on it instead.
Classes are not the same as inline styles, but you can also remove those with .removeClass().

You can use jquery:
$("#myID").attr("style","[Nothing here, or eventually styles to override]");
More info there:
http://api.jquery.com/attr/

editable div: text-cursor gets set inside a tag

I have an editable div. The content of that div looks e.g. like that:
This is a <ins>new</ins> chapter.
(The tags are not visible, they are for styling)
If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:
This is a <ins>new and very interesting</ins> chapter.
But it should look like that:
This is a <ins>new</ins> and very interesting chapter.
How can I set the text cursor behind the tag and prevent that new text is written inside the tag?

OK. The first idea was to made the
<ins contenteditable="false">new</ins>
Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.
Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:
If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:
working in almost every browser...
working with a little bug...
working but if someone...
must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE.
This will prevent the user from destroying Your database and doing things he can't.
After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).
NICE LECTURE :)
https://stackoverflow.com/a/7232871/1125465
http://jsfiddle.net/X6Ab8/
**SOLUTION **
I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great.
Make an additional span element between the ins elements (for example using php:
$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);
Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...
ADDITIONAL SAFETY when using javascript hacks
If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:
Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
Now if someone edit any of them, You can easily repair them.
PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).
Hope it helps! Best regards.

apply jquery effect on dynamically added div

function myfunction(id){
//code
$("#mydiv").hide();
};
But 'mydiv' is dynamically added , and the function is not working .

Since the part of the code you shared seems to be fine, I suspect that there is something else wrong with your code.
Try to debug it. It is not that hard and let's you figure out errors on your own much faster than looking at your code really hard.
First if would be good to know if you reach that line of code in question. You can open the developer console and add a breakpoint to the line in question, or you can add alert("this line is reached and executed") in your code, and then you will know if that line is reached and executed.
If you reached the line in question, it would be good to know things about what is happening there:
For example it would be good to know if $("#mydiv") matches anything. If you are afraid of the developer console, you can always try: alert($("#mydiv").length). If it's 0, there is nothing matched, if it's 1, you have matched an element that will be hidden if you call $("#mydiv").hide(). If it's 0, you haven't been able to match an element. That means that there is currently no elements in your DOM with the id of mydiv. It does not matter if it should have been added dinamically or should be there from the start, it's not there. You might have made a spelling mistake in the id.
Since you are matching something added dynamically by it's id, it is possible that you already have an element with the ID mydiv. If there is more elements with the same ID, only the first one will be matched! More than one elements with the same ID is not just bad practice, it's invalid, and will possibly lead to more bugs and headaches later.
If you are sure that you match the correct element and it's not hidden when you call $("#mydiv").hide(), than there is always ways to look for the problem: for example if you open the javascript developer console, the javascript errors will be listed there. Be sure to check them if they are related to this problem.
Happy bug hunting!

Make sure that you're calling $("#mydiv").hide(); after you've added #mydiv. The code itself will work absolutely fine, provided you've already added #mydiv.

JavaScript innerHTML links iOS browser

I am struggling to get links to become clickable when using JavaScript innerhtml, or even jQuery html or append.
I have tried following this jquery .html() VS innerHTML() and asking a number of questions, but it seems all suggestions have no worked.
How can I put a link using this?
innerHTML("<a href='http://www.google.com'>google.com</a>");
and onclick
innerHTML("<a href='#' onclick='loadlink('http://www.google.com');'>google.com</a>");
I have tried to do it both ways, and it just is not working.

.html() is a utility function provided by jQuery, so if you are using a jQuery wrapper to set the value then you need to use it
var el = jQuery('#myelementid');
el.html("<a href='http://www.google.com'>google.com</a>");
.innerHTML is a property of the dom object, so if you have a dom element reference then you need to use it. Note: It is not a function it is a property
var el = document.getElementById('myelementid');
el.innerHTML = "<a href='http://www.google.com'>google.com</a>";

The issue was z-index it seems that you can't have a z-index:-1 as it will not allow you to click anything in that div, removing it fixed my issue, so the issue was not JavaScript at all but rather CSS. It is interesting and a good note, not to sometimes second-guess yourself when you know that your code is not wrong, but to strip it back and look at the CSS and other parts of your site.
It took three days for me to stop thinking about the JavaScript. How I came about this, was because iOS could not debug the issue; I went to Chrome and coded the part in question, and it worked fine, once I added the same styling and CSS it stopped working, removed a few divs and it worked again, so the only thing to look at was the css, i could not see anything wrong, but then I thought, wait a second what does z-index do? it moved the div in front of another div, -1 could mean that it is behind the body, and there for it can be seen, but not click.
It was the only thinking I could come up with and it fixed the issue.