We Keep Coding

Get reference to element nested within another element

How do I go about getting a reference to an element nested inside another element I can find by getElementByID()?
I have this so far:
<table>
<tr id="templateRow" style="display: none;">
<td><input name="f_name[]" type="text"></td>
<td><textarea name="f_description[]" rows="4"></textarea></td>
<td><input name="f_category[]" type="text"></td>
</tr>
</table>
and have some JS that adds in copies of that to build out the table (removing the id and style attributes as I go).
Assuming I have a reference to the <tr>, how do I reference the input named f_name[] within that table row?
Background: For the moment I have temporary id's on the nested elements, removing them too as I go. The tricky situation I have is that I have a function that adds 1 row (and returns a reference to it), and another function that adds multiple rows (calling the addOneRow function) .. and I want the addManyRows function to end up setting the focus on the first row added.

In any reasonably recent browser, you can use the querySelector method to query for children of the element.
Example:
var templateRow = document.getElementById('templateRow');
var f_name = templateRow.querySelector('[name="f_name[]"]');
var f_description = templateRow.querySelector('[name="f_description[]"]');
var f_category = templateRow.querySelector('[name="f_category[]"]');
console.log(f_name.outerHTML);
console.log(f_description.outerHTML);
console.log(f_category.outerHTML);
<table>
<tr id="templateRow" style="display: none;">
<td><input name="f_name[]" type="text"></td>
<td><textarea name="f_description[]" rows="4"></textarea></td>
<td><input name="f_category[]" type="text"></td>
</tr>
</table>

Use Element#querySelector method and where use attribute equals selector to get based on the attribute.
tr.querySelector('td input[name="f_name[]"]')
var tr = document.getElementById('templateRow');
tr.querySelector('td input[name="f_name[]"]').style.color = 'red';
<table>
<tr id="templateRow" style="">
<td>
<input name="f_name[]" type="text">
</td>
<td>
<textarea name="f_description[]" rows="4"></textarea>
</td>
<td>
<input name="f_category[]" type="text">
</td>
</tr>
</table>

How to get nth div's child element value using jquery or javascript

I want to get the value of 4th div's child input element.
Basically im getting checked chekbox value and would like to add the associated input box value using "this"keyword
Here is my html code
<div class="container">
<div class="cell-checkbox" style="float:left;margin-right:5%;">
<input type="checkbox" name="select" value="7" class="big">
</div>
<div class="cell-desc" style="float:left;margin-right:5%;width:30%;">
<!-- Content -->
</div>
<div class="cell-cart"> //input box is inside this div
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right">
<table align="center" class="cellBuy">
<tbody>
<tr align="right">
<td width="1%">
<input type="hidden" name="buyid" id="buyid" value="7">
<input type="hidden" name="category" value="464">
<input type="hidden" name="itemid" value="">
<input name="qty" id="qty" size="6" maxlength="6" value="1" class="input"> /*want to get this input text value
</td>
<td height="20">
<div align="left">
<input type="button" class="btn-BuyOff" value="Buy" id="addtocart" name="addtocart">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have tried the below mentioned code but its not working
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().next().find('#qty').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);

Try using closest to get the closest parent that contains both inputs and than trigger the find
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('input[name="qty"]').val());
});
or:
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().siblings('.cell-cart').find('input[name="qty"]').val());
});
Note: if you have multiple groups of inputs you will need to wrap each group in a dom element preferably ul li

$(':checkbox').eq(3)
This gives you 4th element in jquery. Indexing starts from zero, so .eq(3) will give 4th child.

Use name instead, and never use same id for multiple elements:
$(this).parent().siblings('.cell-cart').find('[name=qty]').val();
Or use this if container contain multiple <div class="cell-cart">:
$(this).parent().next().next().find('[name=qty]').val();

You have issue with dom traversing. $(this).parent() do not return div having input checkbox element in it. You should rather traverse to closest div with class container and then find input checkbox in it. Like this:
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('[name="qty"]').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);

How to delete a table row having <input> with property data-assigned-id="183" in jquery

I need to delete the specific row(each is generated through foreach)having in jQuery.Below code is my table tr structure.
<tr class="eachitem">
<td>
<img src="/Content/images/pro2.jpg" style="width:200px;height:auto">
<p>pro2.jpg</p>
</td>
<td>
<input id="preview" name="preview" type="checkbox" value="true">
<input name="preview" type="hidden" value="false">
</td>
<td class="qtyid">
<input class="qty" type="text" value="1">
</td>
<td>0</td>
<td>
<input id="deleteCart" type="submit" value="Delete" data-assigned-id="183">
</td>
<td>
<input id="updateCart" type="submit" value="Update" data-assigned-id="183">
</td>
</tr>

You can use attribute selector [] for getting the input with data-assigned-id='183'
$("input[data-assigned-id='183']").closest("tr").remove();
After getting the particular input element, then use .closest("tr") to get the parent row of that element.
Then use .remove() to delete the element.

find that id and remove parent tr as following should work
$("input").each(function(){
if($(this).data('assigned-id') ==183){
$(this).closest('tr.eachitem').remove()
}
})
fiddle

You need to remove your ID attribute from delete and update buttons as they as generated in loop (so will be duplicate IDs there). You can assign a class name to them like(for delete button) :
<input type="submit" class="deleteCart" value="Delete" data-assigned-id="184">
And then based on which delete button is clicked , you can find corresponding closest <tr> element and remove that:
Jquery Code will be like below:
$(".deleteCart").click(function(){
$(this).closest('tr').remove()
});
Fiddle Demo

Get input element inside <tr> with based on data-attribute value

I have the following code:
<tr class="my-field" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<div class="my-color_picker">
<input type="text" class="wp-color-picker">
</td>
</tr>
I need to get that input text element with class="wp-color-picker".
I can do this with $('input.wp-color-picker'), but that will get all input elements with class=wp-color-picker. I only want to get those elements that are inside a tr with data-name='background_colour'.
Hope that makes sense.

Use a descendant selector to combine those to needs
$('tr[data-name="background_colour"] input.wp-color-picker')
Here tr[data-name="background_colour"] will find the tr you are looking for then the descendant selector along with the input selector(input.wp-color-picker) will find the target element.
Attribute equals selector
Descendant selector

You can do this
$('tr[data-name="background_colour"] input.wp-color-picker')
Example:
alert($('tr[data-name="background_colour"] input.wp-color-picker').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="my-field" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<div class="my-color_picker">
<input type="text" class="wp-color-picker" value="hello world">
</td>
</tr>
</table>

try this
$("tr[data-name='background_colour'] .wp-color-picker")

How to add row in html table on top of specific row?

I have a table, and each row has a button to add a new row on top of it. Each row has new inputs.
I know how to add a row on top of the table, but not on top of each row that I'm clicking on the button. Would anyone have a tip on how to solve it? I might be able to do it, but the solution I see is very complicated, and I'm sure there must be a smarter solution.
Oh, also I don't know how to update the parameter sent in the insertNewRow(id) function.
So far this is what I have:
<script type="text/javascript">
function insertNewRow(id){
var row = document.getElementById("bottomRow");
var newrow = row.cloneNode(true);
console.log(newrow);
var newInputs = newrow.getElementsByTagName('input');
var allRows = row.parentNode.getElementsByTagName('tr');
row.parentNode.insertBefore(newrow, row);
var i=row.rowIndex;
console.log(i);
}
</script>
<table id="myTable">
<tr>
<td>Title1:</td>
<td></td>
<td>Title2:</td>
<td></td>
<td>Title3:</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input class="c1" readonly maxlength="9" size="7" id="gTop" type="text" value ="11"></td>
<td> <-></td>
<td id="l1"><input class="c2" style="width:35px;" maxlength="9" size="7" type="text" id="lTop" value="33"></td>
<td>=</td>
<td id="rv1"><input id="rvTop" input class="c2" style="width:105px;" maxlength="100" size="37" type="text" value="blahblahblah"></td>
<td></td>
<td>x</td>
</tr>
<tr id="bottomRow">
<td><input class="c1" readonly maxlength="9" size="7" id="gBottom" type="text" value =""></td>
<td> </td>
<td id="l1"><input class="c2" style="width:35px;" maxlength="9" size="7" type="text" id="lBottom" value="11"></td>
<td>=</td>
<td id="rv1"><input id="rvBottom" input class="c2" style="width:105px;" maxlength="100" size="37" type="text" value="blahblahblah"></td>
<td><button type="button" onclick="insertNewRow(1)">+</button></td>
<td>x</td>
</tr>
</table>

In the onclick attribute, instead of just calling insertNewRow(), do something like
insertNewRow.apply(this);
The this keyword inside the onclick attribute is a reference of the clicked element. With insertNewRow.apply(this), we'll be calling insertNewRow() and at the same time, assign the this keyword inside that function call to the clicked element or in this case, the button (if we don't do that, this inside insertNewRow() will be a reference to the Window object instead). Then in, your insertNewRow() function, check if the current element being clicked on is a tr element. If not, go up by one level and see if that element is a tr element. Keep doing that until you get to the first tr element. So, basically you'll be searching for the closest tr element.
<button type="button" onclick="insertNewRow.apply(this);">+</button>
function insertNewRow(){
var row = null,
el = this;
// Get the closest tr element
while (row === null)
{
if (el.tagName.toLowerCase() === 'tr')
{
row = el; // row is now the closest tr element
break;
}
el = el.parentNode;
}
// Rest of the code here
}​
JsFiddle
If you're still not sure what Function.apply() is, take a look at the documentation here.