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>

How add ID to HTML href with javascript

I have an HTML like this
<div class="this">
EXP
</div>
I want to add id to <a>. But do not know what to do.

First select your element using something like .getElementsByClassName(). Keep in mind that .getElementsByClassName() returns a NodeList collection of elements, so you'll want to access the first index (or loop over them). You can then simply set the ID with .id, as the ID is merely a property of an element.
This can be seen in the following:
const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);
<div class="this">
EXP
</div>

If you want to add this with Javascript, you'll need to use a selector to target your <a> tag and then set the id attribute on it. You can do this by using the querySelector() function or as seen below:
// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";
There are many other available functions to handle this through native Javascript and other frameworks, so your milage may vary depending on what you are using.
Example
In this example, we have provided some CSS that should only apply to an element with an id of "test" and we'll run the necessary code to show that the id is being added to the element (as it will be red):
document.querySelector('.this > a').id = 'test';
#test { color: red; }
<div class="this">
EXP
</div>

Add the id attribute to the <a> tag. See the differences of the middle line:
<div class="this">
<a id="expid" href="exp.com">EXP</a>
</div>

How to replace all id from href?

I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?

You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.

You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()

How to remove specific tag in jquery?

Example:
html = '<font><a>Test Message</a></font>';
html = html.find('font').remove();
Expecting Output:
<a>Test Message</a>
Actually this code is not working. Please help me to solve my problem.

As you've a string that contains HTML markup, you can use string replace functions to remove unwanted elements.
To remove only <font> and </font> you can use regex here.
html = '<font><a>Test Message</a></font>';
html = html.replace(/<\/?font>/g, '');
document.getElementById('result').innerText = html;
console.log(html);
<pre id="result"></pre>
Regex Explanation:
/<\/?font>/g matches <font> and </font> strings. \/? will match zero or one /.
Warning: The g flag in the regex will replace all the matches in the string. So, if the string contains more than one font elements, all will be removed.
Note: Using jQuery's remove() will also remove the descendants of the <font>.
You can also use jQuery's html() methods as follow:
html = '<font><a>Test Message</a> </font>';
html = $(html).html();
// To show result on page
$(document.body).text(html);
console.log(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

To remove elements and content, there are mainly two jQuery methods you should use:
$(html).find(selector).remove() - Removes the selected element (and its child elements)
$(html).find(selector).empty() - Removes the child elements from the selected element
Give more detailed code if you need more detailed answer with right selector.
Links to jQuery for remove and empty methods.

Use jquery unwrap to remove the parent of the a tag font
Then append it to a dynamicaly created div and call the html method to get the result
try:
html = $('<div>').append($(html).find('a').unwrap()).html();
https://jsfiddle.net/p0acop2k/

You can use it like this
$(html).find('font').remove();
as #Tushar commented Note: This'll also remove the anchor element
inside <font>, resulting in giving empty string,
so you can use
html = '<font><a>Test Message</a></font>';
new_html = $(html).find('a').clone(); // this is just an anchor
// now your new html is <a>Test Message</a>

html = $('<font><a>Test Message</a></font>');
html.find('font').contents().unwrap();
console.log(html.html());

Attributes in JQuery

Suppose I have these divs:
<div class="hat" rel="cap">
<div class="hat" rel="pine">
<div class="hat" rel="mouse">
How do I use JQuery to do a "where"?
For example
$("div.hat").remove WHERE rel="mouse"

Use the Attribute equals selector:
$('div.hat[rel=mouse]').remove()

You should be able to use the attribute selector:
$("div.hat[rel]") // to get all <div class="hat"> tags with a rel attribute
$('div.hat[rel="mouse"]') // to get a <div class="hat"> tag with a specific rel attribute

Use one of the attribute selectors such as the Attribute Equals Selector for this type of selection. For example:
$('div.hat[rel=mouse]').remove();
There are a number of other variations of the attribute selector to do things like matching an element whose attribute begins with, ends with, or contains a certain value. Check out all the Attribute Selectors at the jQuery API and familiarize yourself with them.