How can I add delete button into table's row inside script?

Question

I have this code and I want to add delete button in each row of the table but my problem is the table inside the so how I can add delete row ? I want the delete row each row in the table to delete only row that button show in it

<html>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <select id = "locapavm" name = "pavlocation" >
        <option value="rami">rami</option>
        <option value="lara">lara</option>
        <option value="ahmed">ahmed</option>
            </select>
        <br><br>
        City: <select id="sevepavm" name="pavseverity">
    <option value="">- Severity -</option>
    <option value="Low">Low</option>
    <option value="Medium"> Medium</option>
    <option value="High">High</option>
</select>
        <br><br>
<textarea id="planpavm" name="pavplan" ></textarea>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">        
    </form>
</div>

<h3>List Of Persons</h3>
<div id = "tab">
        <table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Seve</td>
                    <td>plan</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
</html>

and this is the script

function AddData(){

            var rows = "";
            var name = document.getElementById("locapavm").value;
            var city = document.getElementById("sevepavm").value;
            var plan = document.getElementById("planpavm").value;


            rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = "deleterow(id)">Delete</button></td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

    function ResetForm(){
        document.getElementById("person").reset();
    }
   function deleterow(id){
     $("#rows-"+id+"").remove();

help me please

You likely have a syntax error in your console because of your mismatched quotes. Escape them (\") and use the same " + id + " pattern you're using for everything else (e.g., plan) for the id. — Heretic Monkey
– Heretic Monkey, Commented Aug 30, 2019 at 14:46

Mark Baijens · Accepted Answer · 2019-08-30 14:35:20Z

3

You can do this without needing to track id's using the this reference. See my example below. Even better would be to attach the event handlers in Javascript and not inline. Event delegation from the table would be perfect for this. ($('#list).on('click', '.deleteButton', deleterow);)

function AddData() {
  var rows = "";
  var name = document.getElementById("locapavm").value;
  var city = document.getElementById("sevepavm").value;
  var plan = document.getElementById("planpavm").value;

  rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>";
  $(rows).appendTo("#list tbody");
}

function ResetForm() {
  document.getElementById("person").reset();
}

function deleterow(el) {
  $(el).closest('tr').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
  <form id="person">
    <br><br> Name:
    <select id="locapavm" name="pavlocation">
      <option value="rami">rami</option>
      <option value="lara">lara</option>
      <option value="ahmed">ahmed</option>
    </select>
    <br><br> City:
    <select id="sevepavm" name="pavseverity">
      <option value="">- Severity -</option>
      <option value="Low">Low</option>
      <option value="Medium"> Medium</option>
      <option value="High">High</option>
    </select>
    <br><br>
    <textarea id="planpavm" name="pavplan"></textarea>
    <input id="button" type="button" value=" Reset " onclick="ResetForm()">
    <input id="button" type="button" value=" Add " onclick="AddData()">
  </form>
</div>

<h3>List Of Persons</h3>
<div id="tab">
  <table id="list" cellspacing="0px" cellpadding="20px" text-align="center">
    <thead>
      <tr>
        <td>Name</td>
        <td>Seve</td>
        <td>plan</td>
      </tr>
    </thead>

    <tbody>

    </tbody>
  </table>
</div>

answered Aug 30, 2019 at 14:35

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Berrytdm Over a year ago

but I have another problem ... How I can send all the data of the table to database at once cuz when press submit only last row inserted into database but not all the table

Mark Baijens Over a year ago

On standard form submits it's submits the data from the input elements. Not the table elements. There are multiple ways to submit the data. I'd say write an ajax request that sends the data from the table.

volcanic · Accepted Answer · 2019-08-30 14:27:28Z

0

Two problems:

"</td><td><button onclick="deleterow(id)">Delete</button></td></tr>"

should be

"</td><td><button onclick=deleterow(" + id + ")>Delete</button></td></tr>"

Also, there is no id variable in your function. I would suggest using name as an identifier instead:

"</td><td><button onclick = deleterow(" + name + ")>Delete</button></td></tr>"

answered Aug 30, 2019 at 14:27

volcanic

3221 silver badge6 bronze badges

Collectives™ on Stack Overflow

How can I add delete button into table's row inside script?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related