We Keep Coding

How i can remove all the content inside a <td> which came after the first <a>

I am working on a 3rd party application, and I have the following markup :-
Now I want to hide the text and link which comes after the "New item" link. Mainly to hide the "or" text and the "edit" link and the "this list" text... so how I can do this using css if possible ?
mainly to specify to remove all the content which comes after a link with id = "idHomePageNewItem", where this content is specified inside the same <td>?

You can use jquery for this.
$(".ms-list-addnew a:not(:first)").hide();
$(".ms-list-addnew").contents().filter(function () {
return (this.nodeType == 3);
}).remove();

You can use query selector and for loop by specifying the id and make use of parentElement if you dont want to specify the classname. Hope this one helps
<table>
<tr>
<td class="ms-list-addnew">
Something
or
Nothing Nothing
</td>
</tr>
</table>
<script type="text/javascript">
var element = document.querySelectorAll("#idHomePageNewItem");
for(var i=0; i<element.length; i++) {
element[i].parentElement.innerHTML = element[i].outerHTML
}
</script>

select all <table> tags that has <input> and <section> tags in them

How can i select all <table> tags that has <input> and <section> tag in them
-by jQuery?
something like:
var tables_with_input = $( "table" that_contain input,section) ///pseudo code

You can use :has for that, it checks if the matching elements contains certain elements etc.
$('table:has(input, section)')
FIDDLE

var tables_with_input = $(context).find('table').has('input');

How to reload jquery on onclick event?

I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.
This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is ckeditor.
<script type="text/javascript">
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
});
});
window.onload = function()
{
CKEDITOR.replace("editor1");
};
</script>
and this here is echo for the table, I am using a foreach.
echo '
<tr class="trClass" id="'.$counter.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="d_'.$counter.'" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
$counter++;
}
I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN

Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class. Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).
(According to the documentation, CKEDITOR.replace(var) will either take a DOM element, ID, or name.)
Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique id)
<section id="d_' . $counter . '" style="display:none;">
<textarea id="editor_'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
CKEDITOR.replace('editor_'+id);
});
});
The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.
EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)

Try targeting the table and filtering by the rows using the .on() method.
$(document).ready(function()
{
$('#table_id').on('click','.trClass',function() {
var id = $(this).attr('id');
$('#d_'+id).css('display', 'block');
$('#table_id').css('display', 'none');
});
});
Details on .on() are here: https://api.jquery.com/on/
And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.

In Javascript how can I make an Alert and modify html based on the contents of a form

I need to take the contents of form fields (client, phone number) validate them (most likely using regex) and concatenate them into an alert and a modify some html so on form submit I get
<p>John smith
99999999
2 wilerby dr
morrowie city
morrowie </p>
and alert("form data")..
I tried with something like var field1 = document.forms[0].elements[0].value,
but not sure how to address the fields.
Edit:
<form id="form1" action="form_action.asp">
<fieldset>
<table cellpadding="3" border="0">
<th> Order Details </th>
<tr>
<td>Client Name:</td>
<td><input id="clientname" type="text" name="clientname" value="" maxlength="20"></td>
</tr>
...
Edit 2
var name = document.getElementById('clientname').value;
function buttontest()
{
alert(clientname);
}
using this script I keep getting a [object HTMLInputElement] alert, the script is external and the script tag is in the header.

You should use DOM selectors alike document.getElementById('elementId').value.
Please read the resembling documentation about such browser APIs: https://developer.mozilla.org/en-US/docs/Web/API/document

Try add an ID to those fields, and use getElementById(). Example.
var val = document.getElementById('id_field').value;
document.getElementById('id_tag').innerHTML = val;

var clientName = document.getElementById('clientname').value;
alert(clientName);

if you already know the sequence no of the element that you want to address then only you can use the syntax you specified i.e. as follows:
document.forms[form_index].elements[form_element_index].value
form_index->the index of the particular form where the element is.
form_element_index->the index of the element in the particular form.
So you could use:
alert(document.forms[form_index].elements[0].value);
N.B.-form_index will be 0 only if the form you refer to is the first form in your document.
Otherwise
If you don't know either the sequence no of the form or the sequence no of the element in the form you should use the id attribute to refer to it(No need of any reference to the form where the element is) which is the usual approach and I personally suggest you to use this.
So in your code use the following:
alert(document.getElementById('clientname').value)

You should use document.getElementById('ID'), you can go to www.w3schools.com for more details.

select a different element other than the one clicked

How do I select an element with jquery, when a different element is clicked, when you don't know the name of the element? The code below is looping over the all the categories. I don't know how many categories there are, or what the names will be. When the 'insertUrl' link is clicked, I need to select the text area.
The only thing I can thinking is running an function in onclick and passing the name of the text area as a parameter.
Also, I'm not sure that I can use a selector when every link has the same id, so is this even possible?
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>

If the HTML structure stays the same you can use .prev()
You shouldn't have elements with the same ID. You can use classes class="insertUrl"
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>
and
$(".insertUrl").click(function() {
var textarea = $(this).siblings('textarea');
});

maybe its better if you use:
$(this).siblings('textarea');
this way you have more flexibility with the html controls order.
this way, if you remove the or change something else inside that TD the script will still works.

An even better way would be to use the <label> element. This way, you can insert later additional elements between the text comment and the textarea, and it still will work.
<textarea id="ta_id1" onclick="click_processing_func"></textarea>
<label for="ta_id1" class="link">Insert Url</label>
Now, if anyone clicks on the label, textarea will receive the click event.