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.

[@BallEcomThatthana]

thank you very much you really saved my life!

[@NoahGlasercodingwithnoah]

Thank you!

[@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

[@britonio2660]

Straight to the point. Good stuff

[@roshanpatro5777]

Amazing. Thank you so much!!! ❤

[@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?

[@recaptchaepazz1254]

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

[@sistana]

Thanks, thanks, thanks my friend.

[@bronxandbrenx]

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

[@NoahGlasercodingwithnoah]

Thank you!

[@johanngreyvenstein9180]

very cool, thanks !

[@NoahGlasercodingwithnoah]

Thank you

[@athraafaraj8387]

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

[@NoahGlasercodingwithnoah]

Thank you!!

[@AditAzepe]

Please tutorial for grand total value in dynamic row

[@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!

[@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?

[@akshayaparida706]

Best explanation sir.

[@maskman4821]

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

[@NoahGlasercodingwithnoah]

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

[@areebjawad3033]

Thats what I was looking for

[@mohamadc4028]

thank you, great explanation!!

[@oldsoutheuropean6343]

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

[@anmolbajaj1178]

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

[@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!

[@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

[@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

[@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.

[@Terapap3117]

Very informative

[@powtekmostek732]

thanks man ur amazing

[@heikeneubau7064]

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

[@martiruda]

can this be applied to columns I guess??

[@NoahGlasercodingwithnoah]

It would be a little tougher but doable

[@DevsLikeUs]

Great tutorial!

[@NoahGlasercodingwithnoah]

Thank you!!

[@DevsLikeUs]

Noah Glaser no problem!

[@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.

[@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?

[@Code-tf2nn]

thank you sir

[@phpisdead]

Thanks bro

[@jackiedelgado5720]

omg thank you~!

[@NoahGlasercodingwithnoah]

For sure!

[@Mercio2]

Thanks!

[@MohamedRaffiM]

how to append row

[@NoahGlasercodingwithnoah]

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

[@dsureshkumar6261]

nice nice nice

[@kalishwarimurugasamy3083]

No clarity in video

[@tijabowebsite2625]

thank u sir