We Keep Coding

How to read in an id element that has an href

I am trying to remove the content referenced by the following id:
<...id href="https://xyz'...>
My code:
var right = document.getElementById('https://xyz');
var parent = right.parentNode;
parent.removeChild(right);
The problem is when I reference the name of the id, it comes back as null. I tried document.getElementById('https://xyz').href, yet still null. Any suggestions?
Thanks.

You probably want to use document.querySelector:
var right = document.querySelector('[href="https://xyz"]');
or if you need the n-th match, document.querySelectorAll:
var right = document.querySelectorAll('[href="https://xyz"]')[n];

getElementById as the name suggests, selects an element by id so you have to define an id on your element: id="some_id" and then in JavaScript document.getElementById('some_id')

That's because you did not assign any ID to that tag. So document.getElementById('https://xyz') won't give you anything because there is no tag with this ID.
You have to assign an ID like this:
<...id="ID_of_href" href="https://xyz'...>
Then you can get it with:
document.getElementById('ID_of_href')

First of all we got to understand what is the html id attribute.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id.
According to this link: https://www.w3schools.com/tags/att_id.asp.
W3schools is a great web site for you to learn web development.
How to achieve your purpose:
const barElement = document.getElementById('bar');//Getting the element which id is bar.
console.log(barElement);
const fooElement = barElement.parentNode;//Getting bars parent.
console.log(fooElement);
<div id="foo">
<a id="bar" href="#"></a>
</div>

select a string after a substring in an element's class name

I have an element that contains an input text, to get the input text I'm using the jQuery method find.
The input text has a class name like this page-id-x with the x is variable, so I want to select that number after the substring page-id, and this is what I tried :
var id = ui.item.find('input').attr('class').split(/\s+/).filter(function(s){
return s.includes('page-id-');
})[0].split('-')[2];
console.log(id);
I think this code is too complicated, but I couldn't figure out some other way to do it.
If someone knows a better way, I'll be thankful.
Thanks in advance.

I'm going to assume the x part of page-id-x, not the id part, is what varies (since that's what your code assumes).
Another way to do it is with a regular expression, but I'm not sure I'd call it simpler:
var id = ui.item
.find('input')
.attr('class')
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
Example:
var ui = {
item: $("#item")
};
var id = ui.item
.find('input')
.attr("class")
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
console.log(id);
<div id="item">
<input class="foo page-id-23 bar">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The above makes the same assumptions your current code does, which are:
The first input in ui.item is the one you want
It will have the relevant class name
I assume those are okay, as your question is asking for an alternative, suggesting what you have is working.

As you're using jQuery, take a look at this: https://api.jquery.com/category/selectors/attribute-selectors/
For your case, you can use $('[class^="page-id-"'). These types of selectors (listed on the link above) actually work in CSS, too. (At least most should, if not all.)
To get the number after page-id-, my suggestion would be to store that number in some other HTML attribute, like data-pageID="1" or the like.
So you could have:
<div id="page-id-3" data-pageID="3">CONTENT</div>
Then, when you have the DOM element using $('[class^="page-id-"'), you can access that number with .attr('data-pageID').val().

If you can control the HTML markup, instead of using class names, you can use data attributes instead. For example, instead of:
<input class="page-id-1">
You can use:
<input data-page-id="1">
Then jQuery can find this element effortlessly:
$('[data-page-id]').attr('data-page-id')

You can find your element using the *= selector.
let elem = document.querySelector('[class*=page-id-]')
Once you have the element, you can parse the id out:
let [base, id] = elem.className.match(/page-id-(\d+)/)
console.log('page id: %s', id);

Add an id to a dynamically created element

I'm trying to add an id to an element that I create dynamically using javascripts' document.createElement() method. Basically I want to create an iframe in my html document and at the same time give that newly created element an id.
Here's my code so far. I've figured out how to put the element in the DOM and all that, i just need the id.
function build(content){
var newIframe = document.createElement("iframe");
var newContent = document.createTextNode("Hello World!");
newIframe.appendChild(newContent);
var element = document.getElementById("container");
document.body.insertBefore(newIframe, element);
document.getElementsByTagName("iframe").id = "active";
};
As you can probably see, I have tried to give it an id at the very end. Problem is, it doesn't work.
So if anyone has any idea of what is wrong here, or an alternative way of doing what I want to do, please feel free to express yourself. Many thanks!

Just add an attribute (id is an attribute) to that element directly, like this:
var newIframe = document.createElement("iframe");
newIframe.id = 'active';
... although it looks quite strange to have id equal to active (too generic for a unique identifier).
Your current approach doesn't work because document.getElementsByTagName("iframe") returns a collection of elements - NodeList or HTMLCollection (it's browser-dependant). While you can assign a value to its id property, it won't do what you mean to. To make it work, you can adjust it this way:
document.getElementsByTagName("iframe")[0].id = "active";
... but, as shown above, there's a better way.

newIFrame.setAttribute("id", "something");

IE getelementbyid for object in the document

I need to getElementById for an object which already exists in the document.
In the example, I would like to get the element "test" which is sub of parentDiv1.
It works fine in FF but not with IE. Any tips?
Example:
<div id="parentDiv1">
<ul id="test1">test</ul>
</div>
<div id="parentDiv2">
<ul id="test2">test</ul>
</div>
<script>
var prtDiv1 = document.getElementById("parentDiv1");
var test1 = prtDiv1.getElementById("test1");
</script>

You shouldn't have more than one element with the same id in your document. Use a class. The easiest way for you to do what you want then would be to use jQuery and write $('#parentDiv1 ul.test') to select your element. Other than jQuery, you would need to implement getElementsByClassName in javascript in IE because afaik it still doesn't support it natively.
Edit: Make sure there aren't any "name" attributes that have the same value as the target id, and also that the js variable you're setting has a different name than the target id.

Calling getElementById on a node is non-standard... If you want to get the element with ID test1 (as it is its id, this one should be unique) and check that it is a child of element with ID parentDiv1 rather use this :
// get the node with ID `test1` in the document
var test1 = document.getElementById("test1");
// Check if it is a child of `parentDiv1`
var isChild = document.getElementById("parentDiv1").contains(test1);
You can look at MDN doc about contains here.

How to get attributes of container in jquery?

How can I get attributes values from an container using jquery ?
For example:
I have container div as:
<div id = "zone-2fPromotion-2f" class = "promotion">
here how can I get attribute id value using jquery and than how can I trim the value to get component information ?
update : how can i get attribute values ?
UPDATE: If I have multiple components on page with same div information than how would I know what attribute value is for which component ?
Thanks.

First, that seems to be a ridiculously long ID -- I'm sure it could be made much shorter while still retaining its uniqueness.
Anyway, on to the answer: First you need a way of accessing your "container" div. Typically, one might use a class or ID to get an element. For example, you could "select" this div with the following call to jQuery:
var container = jQuery('#zone-3a...'); // Fill in ... with really long ID
But, since you're asking how to retrieve the ID, I'm presuming that selecting it via the ID is not an option. You could also select it using the class, although it's not guarenteed to be the only element on the page with that class:
var container = jQuery('.promotion');
There are other ways to narrow down the search, such as:
jQuery('div.promotion');
jQuery('div.promotion:first');
Once you have a reference to your "container", you can retrieve the ID like so:
container.attr('id'); // => zone-3a...
// or:
container[0].id; // => zone-3a...

So assuming your div looks like this.
<div id="foo"/>
You could get the ID attribute by using the attr method.
$("div").attr("id);
That assumes that you only have one div on the page. Not really sure what component information you are looking to get?

You read node attributes with the attr() method.
var id = $( '.promotion' ).attr( 'id' );
In terms of parsing that ID for any other arbitrary information, I can't say since it looks like you're using some sort of proprietary format of which I have no knowledge.

loop thru and get all divs with the class promotion and get the id of each...
$('div.promotion').each(function(){
var attr = $(this).attr('id'); // or whatever attribute
});
or single
var myDivClass = $('zone-3a-2f-2f-2fPortal-2fPages-2fHome-2fZones-2fLeft-2f-7ccomponent-3a-2f-2f-2fSpm-2fComponents-2fPromotion-2f').attr('class');
or another single
var myDivID = $('.promotion').attr('id');