How to remove a duplicate HTML element with Javascript - javascript

I got into a trouble that my code had been created three times with IE 8 without any reason...
However, it works well with FF and Chrome. Please let me know how I can remove the duplicate?
My Javascript:
var get_text_approve_2 = "Transportation";
$(get_approve_2).after("<a class='set_backgr' href=''>" + get_text_approve_2 + "</a>");
HTML:
In FF & Chrome - I got:
Transportation
In IE 8 - I got:
<A class=set_backgr href="">Transportation </A>
<A class=set_backgr href="">Transportation </A>

you can use
while($(".set_backgr").length > 1)
$(".set_backgr:first").remove()
however is more helpful understand why there is a duplicate.

Try using .slice()
$('.set_backgr').slice(0, -1).remove()

Try
:not()
:last
$('.set_backgr:not(:last)').remove();
$('.set_backgr:not(:last)') select all elements with class set_backgr except the last one.
Fiddle Demo
Fiddle Demo with only one element

you might have include twice this file
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
please check it

Related

appendTo() a specific div

I know I'm probably missing something simple but:
var GAME_CANVAS_ELEMENT = $("<canvas id='Project-001-Canvas' class='Project-001-CSS'></canvas>");
GAME_CANVAS_ELEMENT.appendTo($('.a'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>
This works if I appendTo('body') but if I attempt to append to anything else it doesn't seem to work.
I'm wrapping your code inside $(document).ready(function(){}) and with chrome it works: http://jsfiddle.net/o2gxgz9r/3701/
You can verify it by inspecting your html code with Chrome developer tool

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Javascript regex .replace() not working

I vaguely learned how regex work earlier on my last question and thought that I would be able to use it with other strings. Apparently this is not the case. Below are the contents of a div called mqcontainer.
<a style="text-decoration:none;" href="http://i.imgur.com/TeC4R.png"><img src="http://i.imgur.com/TeC4R.png" alt="Posted Image">[br]<small></small></a><small>View Full Image</small>
My goal is to filter out this string so that it instead shows [url=http://i.imgur.com/TeC4R.png]Image[/url] when I click a button. This is what I have been trying:
$("#containerbtn").click(function(){
$("#mqcontainer").each(function(){
$(this).html(
$(this).html().replace(
/<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>/g,
'[url=$1]Image[/url]'
)
);
});
});
It is not working no matter what I try. Can anyone offer me some insight into the problem?
the [br] should be escaped in the regexp: \[br\]
Wrong:
$("#mqcontainer").each(function(){
$(this).html(
...
)};
)};
The code above can not be correct. Since there is only one div with the ID mqcontainer.
Try this:
$("#mqcontainer").html(
$("#mqcontainer").html().replace(/<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>/g, '[url=$1]Image[/url]')
);
<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>
The above should work.
I removed an extraneous ] that was after your image and before the escape [br].
Edit: And a note to add that looking at the revision history after seeing powtac's comments above this is in fact an error you introduced on editing in his suggestion.

how to disable a control in javascript

document.getElementById("ctrl").disabled = true;
this works in IE but does not works in mozila. What shoul I do?
Did you try:
document.getElementById("ctrl").setAttribute('disabled', true);
<body>
<input id="btnSubmit" type="button" value="submit" onclick="disabled(this);"/>
<script>
function disabled(ctrl) {
ctrl.disabled = true;
}
</script>
</body>
It is hard to tell what the issue is that you are having. Does mozilla do anything when the code is executed? does it display an error? What version of ie did you test it with? And can you also provide the html for the ctrl element?
One of the issue with IE and the getElementById method is that in some versions of the browser it will match on the id attribute of a tag as well as the name attribute (which does not follow the JavaScript spec). In Mozilla it is only matching using the id attribute.
http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx

window.history.go not working

I have a button on click of which I want to go one step back using javascript. for this I am using window.history.go although this works fine in IE7 and firefox it is not working in IE6 and there is no change as the user stays on the same page.
I m attaching the event to LinkButton
IE6 has trouble with window.history.go(). It works on regular links like this:
<a href='#' onclick='history.go(-1);'>Back!</a>
But some others won't work. You could try this:
<button onclick='history.go(-1);'>Back!</button>
But I'm not quite sure if that would work. You could also show a button for all other browsers and a link for IE:
<button id='backButton' onclick='history.go(-1);'>Back!</button>
<!--[if IE 6]>
<script type='text/javascript'> document.getElementById('backButton').style.display = 'none'; </script>
<a href='#' onclick='history.go(-1);'>Back!</a>
<![endif]-->
It would offcourse be better to add the behaviout in a seperate javascript file instead of inline in the HTML. But I think you get the idea.
Use history.back()

Categories