We Keep Coding

access and click buttons without ID or class tag

how do i click the button(LayersWidget) in the below html code which doesnt have id or classname.
code is provided below screenshot with highlighted in red.
as i am unable to find the id, i cannot click it using Javascript code

So in your case, the element does have a class, but you could also select the element by another attribute such as the data-dojo-attach-point attribute:
$('li[data-dojo-attach-point="LayersWidget"]')

i am able to access the element using the code
var elmnt1 = document.querySelector('[title="Table of Contents"]');

You can try to select it using jquery and the data attribute as the selector
$('[data-dojo-attach-point="LayersWidget"]').on('click', function() {});

i use the below code to click the element which i got from one of the answer from above.
$('li[data-dojo-attach-point="LayersWidget"]').click();

Binding jQuery .on event to dynamic button with dynamic id

I have a situation where I need to bind an onclick event to a button which is being dynamically injected into the main html document by an external JavaScript.
The problem is that that the class id of the button is suffixed with some dynamic numbers which change every time the page is reloaded.
Please see example:
<button class="clickme12345" type=submit value=clickme>send</button>
Now the situation is that on every page reload the numbers for the class id for the button will change so next time it will be clickme67890.
Would there be any way to get the jQuery binding to work for this situation?
Any reply would be greatly appreciated.

If this is really how you want to use it, you could use an attribute selector
Something like [attr*=value] where the attr contains the string value.
For example (in jQuery):
var $btnElement = $('[class*="clickme"]');
The above will select any elements that have a class attribute containing clickme

How to delete HTML Elements in an iFrame using JavaScript

I have an iFrame and a div with content in it. I want to delete the div via JavaScript, is that possible and how could I do that?
I don't want to just not display it (eg. display: none via CSS) but remove it from the HTML of the site. I have basic knowledge of JavaScript but don't have any experience working with an iFrame.

You can use
$("#iFrameId").contents().find("#yourDiv").empty();
It is better to use remove()
example: $("#iFrameId").contents().find("#yourDiv").remove();
Explanation
empty() will remove all the contents of the selection.
remove() will remove the selection and its contents and all the event handlers associated with it.
For reference:
http://api.jquery.com/remove/
http://api.jquery.com/empty/

You can try something like:-
frame.removeChild(//pass div id here);

Using Jquery to control dymanically generated HTML

What I've got is a web page containing a DIV into which I'm dynamically putting a list of entries with selector buttons, I've simplified the code a lot for this example
The target DIV looks like
<div id="targetdiv"></div>
I ask a server for a list and build a string that looks something like
<div>
nameofentryfromserver1
<input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver1')">
</div>
<div>
nameofentryfromserver2
<input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver2')">
</div>
<div> ... same thing for next entry and so on
Then I insert this into the document with
$( "#targetdiv").html( generatedstring );
Now this works fine and I get a nice list and when I click on the generated button the correct routine is started and the parameter is passed correctly and I get the results I expect.
However when the button is pressed I would like to disable all the "dynamicbutton" class elements, re enabling them once processing is complete.
Inside the routine I call I have the line
$( ".dynamicbutton").attr( "disabled", "disabled");
But this doesn't seem to affect any of the dynamically generated content, if I have other buttons on the page belonging to the same class they get disabled though, so it looks like I can only access content from the originally loaded document using this method.
I've even tried giving each button a unique id and referencing each one individually with no success.
So is there a way of generating this content so that jQuery can access it via it's normal element selection, or is there some other technique I need to usein order to manipulate them ?

You need to run the code AFTER you have added the dynamic content to the page. If you run the code before, jQuery doesn't see the dynamic content. I would run the code when the user presses a button then again after the dynamic content is added. Then remove it after you are done processing.
Also you can use $( ".dynamicbutton").prop( "disabled", true);

It seems if I use a class that hasn't been used for selection previously, then I can use it to select my dynamically generated group.
So if I generate an indeterminate number of inputs with class="brandspankinnewelements" and that class hasn't been used previously as a selector for any other elements on the page
I can now select that group with $( ".brandspankinnewelements" )
That makes life a lot simpler.

How about this?
Insert the script after the #targetdiv and try if it will work.
The .dynamicbutton from here will only disable all the class dynamicbutton inside the id targetdiv.
<div id="targetdiv"></div>
<script type='text/javascript'>
$('.dynamicbutton').click( function() {
$('#targetdiv .dynamicbutton').attr("disabled", "disabled");
});
</script>

You need to delegate the events for such case as the element is not available in the DOM when the event is bound to the #target
Also it is preferable to use .prop() instead of .attr()
Try this
$('body').on('click', '#targetdiv', function() {
$(".dynamicbutton").prop( "disabled", true);
});

jQuery this selector not working on Image

Ok, I have a bunch of images with the same ID of "mashupButton", however I was under the impression that if I make a jQuery click function using "this", instead of "#mashupButton" it would only perform the function on the image clicked. This works for me, but only for the first image with that ID on the page, and after I've done it once, it no longer works.
After document is ready:
$("#mashupButton").click(function()
{
$(this).effect("drop", {direction:"up"}, 1000);
});
Tag is like:
<img src="imagename.png" id="mashupButton">
So to clarify:
I have say 10 images all with the ID mashupButton - I have a jQuery effect that is performed on that specific image when it is clicked. However it only works on the FIRST of those images, even though they all contain the same ID. Do I need to have unique ID's for each one, or can it be achieved this way somehow?

The values for "id" attributes must be unique within a page. It is not correct markup to re-use "mashupButton" as the "id" for a "bunch" of images. Each <img> tag must have its own unique "id" (or no "id" at all, of course). You could use the "class" attribute to mark such <img> elements as being candidates for your "click" handler, of course.

I have say 10 images all with the ID mashupButton
It is illegal to have more than one element with the same id.
If you want to use one selector, you should add a classname.

To expand on #Pointy's answer... yes, the id values must be unique. If you can change the markup, simply change the id attributes to class attributes.
<img src="imagename.png" class="mashupButton" ...
Then your jQuery would look like:
$( '.mashupButton' ).click( function() ...

You have a syntactically-invalid page. When you have troubles, you should always validate your HTML (and validate your CSS) before looking any further.

Instead create a class for those images and then use jQuery to add the click to all the images.
$(".mashupButton").click(function()
{
$(this).effect("drop", {direction:"up"}, 1000);
});
<img src="imagename.png" class="mashupButton">