JavaScript remove dynamically created tr - javascript

I have a js function that adds a tr to a table:
function AddData() {
var rows = "";
var product_id = $('input[name="product_name"]').val();
var product_price = $('input[name="product_price"]').val();
rows += "<td><input type='hidden' name='item_id[]' value='" + product_id + "'><p>" + name + "</p></td><td><input type='hidden' name='price[]' value='" + product_price + "' class='price'></td><td>£<span id='amount' class='amount'>0</span></td><td><div class='btn btn-circle' onclick='RemoveData()' value='" + curtainid + "'>Delete</div></td>";
var tbody = document.querySelector("#myTable tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
update_amounts();
}
Within the <td> is a RemoveData() call. I want this to remove the selected tr from the table. I have tried to use:
function RemoveData() {
var elements = document.getElementById('tr');
last = elements[elements.length-1];
last.parentNode.removeChild(last);
}
but with no success.

getElementById gets a single element, by its id. You're passing in a tag name and expecting it to return a list.
If your goal is to remove the last tr element anywhere on the page, you can use querySelectorAll instead:
function RemoveData() {
var elements = document.querySelectorAll('tr'); // <== Main change
var last = elements[elements.length-1]; // <== Note I added `var`
last.parentNode.removeChild(last);
}
querySelectorAll works on all modern browsers, and IE8.
I added var to the last line because your code was falling prey to The Horror of Implicit Globals without it.
Re your comment below:
How would I remove a selected element...
I'd probably have a single event handler on the table and then trigger removal based on the event's target (e.g., delegated handling). That looks something like this:
"use strict";
var tbody = document.getElementById("the-tbody");
// Add rows when the button is clicked
document.getElementById("btn-add").addEventListener("click", addRow, false);
function addRow(e) {
var row = document.createElement('tr');
row.innerHTML = '<td>Hi there ' +
Math.floor(Math.random() * 1000) +
' <span class="remove">[x]</span></td>';
tbody.appendChild(row);
}
// Remove rows when their ".remove" span is clicked
tbody.addEventListener("click", removeRow, false);
function removeRow(e) {
var elm;
for (elm = e.target; elm !== this; elm = elm.parentNode) {
if (/\bremove\b/.test(elm.className)) { // On modern browsers you could use `classList`
// It's a remove link, remove its parent tr and we're done
removeElement(elm.parentNode);
e.stopPropagation();
return;
}
}
}
function removeElement(elm) {
elm.parentNode.removeChild(elm);
}
.remove {
cursor: pointer;
}
<table>
<tbody id="the-tbody"></tbody>
</table>
<input type="button" id="btn-add" value="Add Row">
There I'm using addEventListener. If you need to support older browsers, you can use the hookEvent function in this other answer instead.

I prefer the jQuery function .closest() to delete the selected row so you don't need to work with an Row-ID...because the threadstarter has already jQuery...try this:
$(document).ready(function(){
$('button[name=deleteTR]').click(function(){
$(this).closest('tr').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 1</td></tr>
<tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 2</td></tr>
<tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 3</td></tr>
<tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 4</td></tr>
</table>
Greetings from Vienna

Related

Get the ID in row that has radio button checked [duplicate]

This question already has answers here:
Getting values of elements in same row when button is clicked, one button per row
(2 answers)
Closed last year.
I have this function which creates a table in a modal popup and the table gets populated from data in an array passed in from an ajax call. Now on the click of a button in the modal popup I need to get the value of item.TimedPathwayID that has its radio button checked and add it to a hidden field.
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function (item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);}
}
I've been fiddling with this kind of thing but with no joy and the radio button in the first row is checked by default so this can't really be tied to a click event if a user just accepts the default without clicking. So how can I do it please?
$('body').on('click', '.radioSelection', function () {
var $tbl = $('#tblTimedPathways tbody');
var $dataRow = $tbl.closest('tr');
var id = $dataRow.find('td').eq(0).html();
});
.closest goes up the html tree, so tbody.closest(tr) is unlikely to be what you want.
you need to then go back down to the cell that contains the data you want.
let $this = $(this); //this is the radio button
let id = $this.closest("tr").find("td.pathwayID").text();
I would also echo that I would generally add the id as an attribute to the row to remove the necessity of the find later.
//sample data
let data = {
d: [{
TimedPathwayID: 1,
TimedPathwayName: "test"
},
{
TimedPathwayID: 2,
TimedPathwayName: "test"
},
{
TimedPathwayID: 3,
TimedPathwayName: "test"
}
]
};
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function(item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);
}
//populate it
PopulateTimedPathwaysTable(data);
$('body').on('click', '.radioSelection', function () {
let $this = $(this); //this is the radio button
//console.log($this);
let id = $this.closest("tr").find("td.pathwayID").text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathways">
<tbody>
</tbody>
</table>

How to get value of text box embeded in cell

I have the following code
<tr val='question'>
<td>
<input style='width: 500px' type='text' placeholder='Q.Enter your question here for radio button? '>
</tr>
How can i find the value of input box embedded in cell .
function saveUserDefQues(){
var table=document.getElementById("QuestionList");
var surveyquestionform=document.forms[0];
var count=$('#QuestionList tr').length
for (var i = 0; i<count; i++) {
var row = table.rows[i];
if(row.getAttribute('val')==='question')
{
var Cells = row.getElementsByTagName("td");;
}
}
}
document.querySelector('tr[val] > td > input').value;
Array.from(document.querySelectorAll('tr[val] > td > input')).forEach(function(entry, index, entries)
{
entry.value; // you may store the value OR process with it AS you see fit
});
Since you are using Jquery this can be done this way.
replace this line of code
var Cells = row.getElementsByTagName("td");
with
var Cells = $(row).find('td');
var inputValue = Cell.find('input').val(); // gives you value of input
Code Refactoring recommended
I would like to refactor your code as below
HTML
<tr data-val='question'> // use data-* attribute to add custom attributes into tags
<td>
<input style='width: 500px' type='text' placeholder='Q.Enter your question here for radio button? '>
</td> // close your td
</tr>
Script
function saveUserDefQues(){
var surveyquestionform = document.forms[0]; // not sure what this is for, so ill leave it as is.
$('#QuestionList tr[data-val="question"]').each(function(){ //loop all tr's which has the data-val set to question
var inputValue = $(this).find('td input').val(); //get the value of input
console.log(inputValue);
});
}
$("tr[val='question'] > td > input").val()
But first you need to write a valid HTML. </td> closing tag is missing. Also you need to put this tr in a <table>.
See this Plunker
function getResult(){
$( "tr" ).each(function( index ) {
console.log($(this).find('input').attr('placeholder') );
});
}

delete row in table with javascript

Apologies if something similar has been posted but I am trying to delete a row the button is on and not just the last row as the search results seem to give me.
I have the following code that adds to an HTML table but onclick doesn't work, the delete button doesn't work and addRow doesn't function. Why not?
java code
function addRow() {
var table = document.getElementById("createOrderTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
... other cells ...
var cell4 = row.insertCell(3);
var btn = document.createElement("input");
btn.type = "button";
btn.value = "Close";
btn.onclick = deleteRow('createOrderTable', rowCount);
cell4.appendChild(btn);
}
function deleteRow(id, row) {
document.getElementById(id).deleteRow(row);
}
table code
<table id="createOrderTable" width="100%">
<tr>
<th>Count</th><th>Product</th><th>Mesh</th><th>Delete</th>
</tr>
<tr>
<td>1</td><td>OL</td><td>200</td><td><button type="button" class="close" aria-hidden="true" onclick="deleteRow('createOrderTable', 1)">×</button></td>
</tr>
</table>
if I change
btn.onclick = deleteRow('createOrderTable', rowCount );
to
btn.onclick = deleteRow('createOrderTable', rowCount + 1 );
I can get the row to show but it throws
Uncaught IndexSizeError: Failed to execute 'deleteRow' on 'HTMLTableElement': The index provided (3) is greater than the number of rows in the table (3).
and doesn't show the button. I'm confused about what I'm doing wrong here.
The row index is not static, so as you delete rows, the row index of remaining rows can change if a row with a lower index is deleted. A solution is to not use rowIndex at all, and just use DOM relationships instead.
You can get a reference to the button that was clicked by passing this to the function, then go up parent nodes until you reach a TR element and delete it, e.g.
// Helper function:
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
return null;
}
function deleteRow(el) {
var row = upTo(el, 'tr')
if (row) row.parentNode.removeChild(row);
}
<table>
<tr>
<td>1</td><td>OL</td><td>200</td>
<td><button type="button" onclick="deleteRow(this)">×</button></td>
</tr>
<tr>
<td>2</td><td>AB</td><td>400</td>
<td><button type="button" onclick="deleteRow(this)">×</button></td>
</tr>
</table>
You can also use event delegation and put a single listener on the table, then use the associated event object's target property to see if the event was initiated by a click on a button with class close. If so, call deleteRow and pass the element reference as a parameter as for the above.
You shoud modify your code like this:
btn.onclick = deleteRow;
And the deleteRow declaration to this:
function deleteRow() {
this.parentElement.parentElement.remove();
}
UPDATE
Check working example.
To delete the current row that the button belongs to
Change onclick of <button> to :
onclick="this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex)"
or change button in html like:
<input type="button" onclick="deleteRow(this)">X</button>
or by JavaScript code using
btn.setAttribute('onclick','deleteRow(this)');
Delete function is like:
function deleteRow(el) {
var tbl = el.parentNode.parentNode.parentNode;
var row = el.parentNode.parentNode.rowIndex;
tbl.deleteRow(row);
}

How can append child elements of an element within the same element with some changes

I have the following html code
<button id="button_id" class="scalable add" title="Add email" type="button" onclick="emailsControl.addItem()" style="">
<tbody id="email_chain_container">
<tr>
<td class="nobr">
<input type="file" id="chain_Image_1" name="Image[1]" class="input-text" />
</td>
<td class="last"><input type="hidden" class="delete" name="email_chain[delete][]" />
<button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span>
</button>
</td>
</tr>
</tbody>
when click on the button, i want to get the elements inside tbody and change the index in input element to index+1 and then append the element again to the tbody. This is the rough code i have used for it. However its not working
emailsControl = {
addItem: function ()
{
var chainParent = document.getElementById('email_chain_container');
var index = chainParent.childNodes.length; //get the number of tr elements present in tbody
var repeat = chainParent.innerHTML;
var newHTML = repeat.replace(index, (index + 1)).
replace('Image[' + (index) + ']', 'Image[' + (index + 1) + ']');
document.chainParent.appendChild(newHTML);
},
}
How can I do it in most effective way?Please suggest your ideas. Thanks in advance
Finally I have done it. Dont know whether this is the best method. But it worked !!!
<script type="text/javascipt">
emailsControl =
{
addItem : function ()
{
var chainParent = document.getElementById( 'email_chain_container' );
var trElements = chainParent . getElementsByTagName("tr");
var index = trElements . length;
var childElements = trElements[0] . innerHTML;
var newHTML = childElements . replace( /1/g , (index+1))
var tr = document . createElement('tr');
tr . innerHTML = newHTML;
chainParent . appendChild (tr);
},
}
</script>

How to append new rows to a table more than once?

I have a table within a form that I want to append new rows as the user enters input in the last row of the table.
$('table.form-table').on('input', function() {
var tableID = '#' + $(this).closest('table').attr('id');
if(jQuery(this).closest('tr').is(':last-child')) {
var currTR = $(this).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = jQuery(currTRhtml);
var checkBox = jQuery('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
jQuery(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
And the html code if needed (simplified/trimmed):
<table class="form-table" id="XXX" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr class="main"><th nowrap colspan="3" align="left"
class="border-left border-top border-right">
<h3>XXX</h3></th>
</tr>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<input type="hidden" name="isnew" value="">
<td >
<input type="text"
name="new_text"
value="">
</td>
</tr>
</tbody>
</table>
The problem is that this works only once and does not continue appending new rows. It's as if the last-child filtering does not get reset...
Any thoughts?
The problem is that you need to use the event's target, rather than "this". Right now "this" refers to the current table, but you need to refer to the current input box and then use closest() to find its parent tr (and :first-child to make sure it's the last one). So your code needs to look more like this:
$('table.form-table').on('input', function(e) {
var tableID = '#' + $(this).closest('table').attr('id');
if ($(e.target).closest('tr').is(':last-child')) {
var currTR = $(e.target).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = $(currTRhtml);
var checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
Notice I'm passing the event as "e" and then referencing the current input box with $(e.target).
Here's a working JS fiddle.
I suspect the problem is that you need to delegate the input event as the appended rows do not exist on $(document).ready(). Try doing something like this to delegate the handler:
$(document).ready(function () {
$('table.form-table tbody').on('input', 'tr', function () {
var self = $(this),
tableID = '#' + self.closest('table').attr('id'),
currTR = self.closest('tr'),
currTRhtml = '<tr>' + currTR.html() + '</tr>',
nextRow = $(currTRhtml),
checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
if (currTR.is(':last-child')) {
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
});
Fiddle: http://jsfiddle.net/KW7ET/

Categories