Develop Reference

How to remove <br> and everything after that?

If I do the following is fine:
<div id="results">
<p>Hello<br>there</p>
</div>
$($("#results p").children('br').get(0).nextSibling).remove();
I get: hello
But if I do:
<th class="infobox">Head</th>
<td>Hello<br>there</td>
var newLineRemove = $(".infobox td").children('br').get(0).nextSibling();
$wikiDOM.find(newLineRemove).remove();
Gives me
Uncaught TypeError: Cannot read property 'nextSibling' of undefined

That is because .get(...) returns a DOM element not a jQuery object.
In the first example you're using $(...) to convert that DOM element to a jQuery object but you're not doing that in the second example.
This will convert the DOM element to a jQuery element and get rid of the error
var newLineRemove = $($(".infobox td").children('br').get(0).nextSibling);
But it won't do what you want it to do because as #Forty3 said "the <td> isn't inside the ..infobox"
This seems to work but I've probably made things more complicated then they have to be:
$(function(){
var td = $(".infobox").next();
if(td.find("br").length){
$(td.contents().get().reverse()).each(function(){
$(this).remove();
if(this.tagName == "BR"){
return false;
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th class="infobox"></th>
<td>Hello<br>there</td>
</table>

I've simplest solution for this, try this one:
$('td').each(function() {
$(this).html($(this).html().split('<br>')[0]);
});
li {
margin-bottom: 10px;
}
#usp-custom-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
</tr>
<tr>
<td>Hell
<br>there</td>
</tr>
<tr>
<td>Hello
<br>there<br>there</td>
</tr>
</table>

Your code doesn't work because the ".infobox td" selector is looking for a td element inside an .infobox element, but in your HTML the td immediately follows the .infobox.
If you want something that is very similar to your existing JS but working with that HTML (noting that td and th elements need to be inside a tr in a table) you can do this:
$($(".infobox").next().children("br")[0].nextSibling).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
<td>Hello<br>there</td>
</tr>
</table>
That is, use .next() to get the element following the .infobox, get that element's child br elements, take the first one's .nextSibling, then wrap it in a jQuery object so that you can call .remove().
EDIT: Note that if there were multiple rows with similar elements the above code would only do the removal on the first one. If it were my code I would probably select all of the relevant elements and then update their HTML something more like this:
$(".infobox").next("td").html(function(i, h) { return h.split('<br>')[0] })

How to disable all rows of HTML table?

[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
I have the following table and button below it:
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?

Just add disabled class to your <tr>'s using $("tr").addClass("disabled").
The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:
tr.disabled {
background-color: grey;
}
Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.
Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by #st_stefanov)

I used this CSS code to disable HTML row
.row-disabled {
background-color: rgba(236, 240, 241, 0.5);
pointer-events: none;
width: 100%;
}

$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});

$(document).ready(function () {
$('#btn').click(function () {
$('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');
$('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
});
});
<input type="button" id="btn" value="Add New Record"/>
<table style="width:100%" id="test_table">
<tbody>
<tr>
<td>Jill</td>
</tr>
<tr>
<td>Eve</td>
</tr>
</tbody>
</table>

Jquery traversal not working with .closest(), .parent().parent() etc

I have an annoying problem whereby I can only get the top two parents of an element and it will not go beyond that. .closest() does not work either. When I look at the hierachy it should work according to the specifications outlined in the documentation.
Here is what I have:
<div id="telephonezone" class="bbox">
<table id="phones" cellspacing="0" width="100%">
<thead>
<tr><th width="70">Type</th><th>Phone number</th><th width="30"></th>
</tr></thead>
<tbody><tr style="background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;">
<td class="primaryset">N/A</td>
<td class="primaryset">0208 989 8183</td>
<td class="primaryset">
<img data-id="0" data-dbid="1126" src="images/dandy-color/cancel.png" title="Delete."></td>
</tr>
</tbody>
</table>
</div>
My Jquery:
$('.bbox tr td img').live('click', function(){
id = $(this).attr('data-dbid') ;
cont = $(this).parent().parent().html() ;
alert(cont);
})
cont = $(this).parent().parent().html() ; gets me the contents of the < tr >, but if I try going higher than that I just get undefined. Same results with prevAll, prev, closest or any combination of them.
How do I select the ID of the div at line one when I click on that image inside the td?
html += '><img data-id="'+i+'" data-dbid="'+v[4]+'" src="images/dandy-color/cancel.png" title="Delete." /></td>' ;

Try specifying that you want the first div parent found in all ancestors.
$(this).parents("div:first").attr("id");

Probably you are trying to access deleted element parents. That's why traversal not working.
<a href="#" onclick="$(this).closest('tr').remove(); console.log('this should be null:' + $(this).closest('div'))">
In this example you can not access 'tr's parents since you have removed it from page.

Find and replace in div table using jQuery?

I have a text "First Name (Given Name, Forename):" that needs to replaced with "Something" using jquery. Please see below text.
<div id="ctl00_m_g_23e3c2e9_71b9_464f_9ad3_46a603eb384f_ctl00_PanelSearch"
sizcache="3" sizset="0">
<table width="100%" sizcache="2" sizset="0">
<tbody sizcache="1" sizset="0">
<tr sizcache="0" sizset="0">
<td style="width: 40%;">
First Name (Given Name, Forename): //replace with "Something"
</td>
</tr>
</tbody>
</div>
How to do this?

If you put a class on your td (tdContent) you could do something like this:
$("#ctl00_m_g_23e3c2e9_71b9_464f_9ad3_46a603eb384f_ctl00_PanelSearch .tdContent").html("New Content goes here");
If you do not want to use a class make your selector
$("#ctl00_m_g_23e3c2e9_71b9_464f_9ad3_46a603eb384f_ctl00_PanelSearch td:first")
The simplest would be to give the td an id:
$("#tdID").html("content");

You'll want to find the DOM element and then use jQuery's text (or html) method.
$('div#ctl00_m_g_23e3c2e9_71b9_464f_9ad3_46a603eb384f_ctl00_PanelSearch td').text('Something')

You're looking for contains.
var text = $('td:contains("(Given Name, Forename)")');
text.html(text.html().replace('(Given Name, Forename)', "Something"));
update
$('td:contains("Company Name")').html('Something')

Problem with JS Selectbox Function

I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed.
My question is two part:
1) How do I write a conditional function that specifically targets the selected option
2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box?
Here is the function I was working on for the first option:
$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();
var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
if (chosenoption.value ="Co-Op"){
subTableDiv1.slideDown("medium");
}
}
});
Html:
<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>

You can use selectmenu.value (or $(selectmenu).val()) to get the value of the selected option, and you can match the functions to the values using an object. Example:
$(function() {
var call_table = {
'Condominium': function() {alert('One!');},
'Co-Op': function() {alert('Two!');},
'Condop': function() {alert('Three!');}
};
$('#customfields-s-18-s').change(function() {
call_table[this.value]();
});
});
Of course, you don't have to define the functions inline. I just did it for concision here. You could define them anywhere and reference them by name instead.

I think you can get this using the position of the item in the list and the table, as long as those relative positions are the same. Change the class on the DIVs so they are all subTableDiv.
$(function() {
$('#customfields-s-18-s').change( function() {
var selected = $(this).find('option:selected');
var position = $(this).find('option').index(selected);
// hide all then show the nth one
$('.subTableDiv').hide().eq(position).show();
});
});

It looks like the select option values are the same as the IDs for the divs. You could use that to define a function that basically shows the div that has the same id as the value of the selected option. Also change the class on each div to subtableDiv.
$("#customfields-s-18-s").change(function() {
// hide all divs
$('.subtableDiv').hide();
// show matching div
var value = $(this).val();
$('#' + value).show();
}