How to dynamically add and remove table rows with javascript

This is part of a series of how-to videos with plain javascript. In this one, we add remove table rows using a form and javascript. The videos are focused on javascript so I don't go over the CSS or HTML.
Starting Code:
raw.githubuser...
Demo:
phptuts.github...
Final Code:
github.com/php...

[@NoahGlasercodingwithnoah]

Forgot to mention that the starting code is in the description.

[@NoahGlasercodingwithnoah]

Good Point I will do that next time.

[@Group-qt2cl]

for td{overflow:hidden; text-overflow: ellipsis; white-space:no-wrap} is not working can u help me

[@NoahGlasercodingwithnoah]

@@Group-qt2cl Can you post the page

[@jovisonmicah1336]

Of all of the videos on youtube on how to dynically add and remove tables rows with javascript, this is by far the best. Concise and without any jquery which is what i have been searching for since forever. Thanks

[@michaelodonnell4061]

Amazing explanation! Loved the little tips and tricks throughout. Definitely implementing some of this to practice with my own code.

[@Co0lGwindolyn]

Thanks! You simplified the concept.. well done!

[@douglashammer.]

finally fixed an issue i had deleting rows from my table. thanks!

[@NoahGlasercodingwithnoah]

awesome glad it helped

[@BallEcomThatthana]

thank you very much you really saved my life!

[@NoahGlasercodingwithnoah]

Thank you!

[@britonio2660]

Straight to the point. Good stuff

[@athraafaraj8387]

you made my day thank you dear,, you are great

[@NoahGlasercodingwithnoah]

Thank you!!

[@theodoreivanov6257]

The starting point I needed. My goal is to have table rows appear and disappear automatically, as certain variables from user input go above or below certain thresholds, not just at the click of a button. I am trying a switch statement. Not there yet 🙂

[@NoahGlasercodingwithnoah]

Awesome!

[@roshanpatro5777]

Amazing. Thank you so much!!! ❤

[@Terapap3117]

Very informative

[@akshayaparida706]

Best explanation sir.

[@sistana]

Thanks, thanks, thanks my friend.

[@mohamadc4028]

thank you, great explanation!!

[@maskman4821]

cool, this video help me review vanilla js !!!

[@NoahGlasercodingwithnoah]

Thank you!! It's good to work with it. Got to stay sharp.

[@bronxandbrenx]

Thank you for this. :) been looking for a week now.

[@NoahGlasercodingwithnoah]

Thank you!

[@amateruss]

How about doing this with number inputs and calculating the sum of those inputs? And when you delete one of the number inputs it automatically recalculates the sum.

[@NoahGlasercodingwithnoah]

That's a good idea thank you!

[@recaptchaepazz1254]

Can you please make a video on how to update specific records and show them in the table dynamically in javascript?

[@johanngreyvenstein9180]

very cool, thanks !

[@NoahGlasercodingwithnoah]

Thank you

[@oldsoutheuropean6343]

Thank you very much, this video helped me a lot.

[@britonio2660]

How do you add a text field to an existing html table cell next to some existing text within said cell by using a button?

[@laukuansin]

how to handle if there are more than one button in a row? And how to get the URL or website value when clicking the delete button?

[@AditAzepe]

Please tutorial for grand total value in dynamic row

[@heikeneubau7064]

Thank you very much!!! This was super helpful to me :)

[@areebjawad3033]

Thats what I was looking for

[@Code-tf2nn]

thank you sir

[@phpisdead]

Thanks bro

[@zainvediocollection]

It takes this data from the textbox and adds it to the table. But how to put the data from the database in the table, initially the table is empty, when we search through texbox, after entering the data, the same row is shown in the table?

[@NoahGlasercodingwithnoah]

You would to loop through it and individually create the trs.

[@powtekmostek732]

thanks man ur amazing

[@thenoch2418]

Awesome tutorial. Quick question, how would you clear the url and website fields after submitting the valid data?

[@NoahGlasercodingwithnoah]

That would be long to explain in a comment, but it's very do able!

[@uchennachukwuba]

To clear the input fields, set the values to an empty string after as the last statement in the submit function

[@anmolbajaj1178]

I doesn't get border line(grid)of td and tr

[@DevsLikeUs]

Great tutorial!

[@NoahGlasercodingwithnoah]

Thank you!!

[@DevsLikeUs]

Noah Glaser no problem!

[@sivertmanum4089]

when i click "submit", the url and website, only show up for a second. Do you know why that is?

[@jxnzxc]

that's the default value you need to pass the function with parameter event and then add event.preventDefault(), because by default when on clicking submit button, the page refreshes

[@Mercio2]

Thanks!

[@Bobby-mf6fw]

My issue is not fixed ocz there is multiple forms in my project using form id is not displaying rows😭

[@NoahGlasercodingwithnoah]

Can you send me a link with the code?

[@martiruda]

can this be applied to columns I guess??

[@NoahGlasercodingwithnoah]

It would be a little tougher but doable

[@jackiedelgado5720]

omg thank you~!

[@NoahGlasercodingwithnoah]

For sure!

[@dsureshkumar6261]

nice nice nice

[@pandemicovid9079]

Thanks, can you complete your tutorial with inline table editing ?

[@NoahGlasercodingwithnoah]

I can do that!

[@pandemicovid9079]

​@@NoahGlasercodingwithnoah Thanks i just found this channel and no doubt to subscribe because you explained good and easy to understand. waiting for the next tutorial.

[@MohamedRaffiM]

how to append row

[@NoahGlasercodingwithnoah]

You can create the element using document.createElemenent and append it to the table body.

[@kalishwarimurugasamy3083]

No clarity in video

[@tijabowebsite2625]

thank u sir