We Keep Coding

javascript dynamically remove text

I have successfully created a button which adds text to the webpage however I do not know a viable way to remove text once this has been created. The js code I have is:
var addButtons = document.querySelectorAll('.add button');
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text)
weekParent.appendChild(item);
}
function removeText() {
//document.getElementbyId(-).removeChild(-);
}
for (i = 0; i < addButtons.length; i++) {
var self = addButtons[i];
self.addEventListener("click", addText);
}
I have viewed various sources of help online including from this site however I simply cannot get any to work correctly. Thank you in advance.

Sure, it should be easy to locate the added <p> tag relative to the remove button that gets clicked.
function removeText() {
var weekParent = this.parentNode.parentNode;
var item = weekParent.querySelector("p");
weekParent.removeChild(item);
}
If there is more than 1 <p> tag inside the weekParent you will need a more specific querySelector.

How to autoselect radio buttons in jQuery

I have a form that contains several rows of radio buttons. When a button is selected in the first row (only first row), I need the subsequent rows to be auto-selected one position over (to the right) from the previous selection until end of table is reached.
Result should look like this, after clicking on "MD" in the first row:
Desired Output
See JSFiddle Example Here
The solution should be relative-position-based if that makes any sense. The only element with consistent ID is the table ("#skuTable").
What I have so far is this (console logging to debug):
$("#skuTable tr").first().find("input:radio").on("click", function(){
var $this = $(this);
console.log($this);
console.log($this.position());
console.log($this.parents("tbody").children("tr:nth-child(2)").find("input:radio").first().prop('checked', true));
});
What that manages to do is select the first radio button on the following row. I need some help figuring out how to select the next radio button relative to the first one's position.

This is how I did it:
var rows = $("#skuTable tr");
rows.eq(0).find("input:radio").each(function(i) {
$(this).on("click", function() {
for(var m = 0, n = rows.length;m < n;m++) {
rows.eq(m).find("input:radio").eq(i + m).attr("checked", true);
}
});
});
DEMO: https://jsfiddle.net/Lnk9p55x/4/

one more solution:
$("#skuTable").find("input:radio").on("click", function(){
loop = 0;
$("input").prop("checked",false);
index = $(this).parent().index("td");
$.each($("table tbody tr"), function() {
$("table tbody tr:eq("+loop+")").find("td:eq("+index+")").find("input:radio").prop('checked', true);
index++;
loop++;
});
});
https://jsfiddle.net/Lnk9p55x/7/

How to dynamically click a label to check entire row only?

The number of rows are dynamic so I cant fixate on the name of the row, here is the fiddle: http://jsfiddle.net/1vp29wxq/1/
$('.NameOfSensor').on("click", function () {
var tr = $(this).parents('tr:first');
var thisRow = tr.find(".rowMode");
var checkChecked = $("input[class='rowMode']:checkbox:checked");
var checkBoxes = $("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
What I get from that is that all check boxes are selected, but I just want the ones from the row where it is clicked. Also, whatever I tried I cant seem to incorporate the 2 variables (tr and thisRow) I created, can I get some help? Also, the number of columns in which the checkboxes are, are always 6 (sometimes I just hide them).

Change your code into this:
$('.NameOfSensor').on("click", function () {
var tr = $(this).closest('tr');
var checkChecked = $(tr).find("input[class='rowMode']:checkbox:checked");
var checkBoxes = $(tr).find("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
Your selector was wrong and got all rows.

Search for checkboxes within the clicked line:
var tr = $(this).closest('tr'); // fast alternative to `.parents('xxx:first')`
var checkChecked = $("input[class='rowMode']:checkbox:checked", tr),
checkBoxes = $("input[class='rowMode']:checkbox", tr);
DEMO: http://jsfiddle.net/1vp29wxq/2/

Using variable from .closest() into a selector

I am sure this is something very easy to do, but I'm stuck.
I have multiple forms in a page each one with a "duplicate" button.
The button duplicates a row and put it at the end of a table that is inside of each form. The class of the tables is '.table-add'. So I'm trying to tell the button to find the closest form element and add it to the path on my selector, but it is not working. I know it can work if I put an ID in each form and call for them, but that's not what I want. Thanks for help.
This is my code:
i=0;
$(".duplicate").on("click", function(e) {
i++;
$newID = 'clon'+i;
selectedObj = $($( e.target ).closest("form"));
alert(selectedObj.html()); //**THIS WORKS**
$cloned = '<tr class="'+$newID+'">'+$(selectedObj+' .table-add tr:first').next().html()+'</tr>';
$(selectedObj+' .table-add > tbody:last').append($cloned);
});

Just use this:
var i=0;
$(".duplicate").on("click", function(e) {
i++;
var $newID = 'clon'+i;
var selectedObj = $(e.target).closest("form");
alert(selectedObj.html()); //**THIS WORKS**
var $cloned = '<tr class="'+$newID+'">'+selectedObj.find('.table-add tr:first').next().html()+'</tr>';
selectedObj.find('.table-add > tbody:last').append($cloned);
});
selectedObj is a jQuery object so you can use the .find() function to select .table-add tr:first and '.table-add > tbody:last'.

How to tell if a row contains cells with textbox with javascript

I have a table that is built dynamically from a user specified query to a database and I want to give the user the option to edit the data from the generated HTML table. When the user double clicks on the row containing the data they want to edit, I have a new row appear underneath it with textboxes for them to submit new values. Right now, when the user clicks double clicks two rows, both rows of textboxes remain in the table and I want to delete the first row before the second shows up. My question is, what is a good was to find table rows containing textboxes so that I can perhaps use JavaScript's deleteRow() function?
I'm generating rows like so:
function editRow(row) {
var table = document.getElementById("data");
var newRow = table.insertRow(row.rowIndex + 1);
var cell;
for (var i = 0; i < row.childNodes.length; i++) {
cell = newRow.insertCell(i);
textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = row.childNodes[i].innerHTML;
textBox.style.textAlign = "center";
textBox.style.width = "90%";
cell.appendChild(textBox);
}
}
and the only way I can I can think of doing it is something like (pseudo code):
for all table rows
if row.childNodes.innerHTML contains 'input'
deleteRow(index)
Thanks for the help

You could use jQuery. Assuming row is a DOM element, this should work:
var textBoxes = $("input:text", row);

i guess the easiest option would be to add the created rows to an array. This way you simply have to delete the rows inside the array and not iterate through the whole table.

I ended up doing the following:
function editRow(row) {
var table = document.getElementById("data");
clearExistingTextBoxes(table);
...
}
function clearExistingTextBoxes(table) {
var tBoxRow = table.getElementsByTagName("input");
if (tBoxRow.length > 0) {
tBoxRow = tBoxRow[0].parentNode.parentNode;
table.deleteRow(tBoxRow.rowIndex);
}
}
Assuming I'm only going to be clearing one row at a time.