javascript - 在 Javascript 中按下按钮时动态删除选定的行

Question

我编写了代码，以便当用户输入名称和类型并按下“添加”时，它会将名称、类型、可用性和删除按钮添加到列表中。我希望当按下删除按钮时，相应的行被删除。

我的 JavaScript:

function AddToWishlist2() {
var table = document.getElementById("WishListTable");
nameInput2 = document.getElementById("API2").value;
search2();
radiobutton1 = document.getElementById("radio-choice-1-1").value;
radiobutton2 = document.getElementById("radio-choice-2-2").value;
// this sets the value to TV show or Movie

if (document.getElementById("radio-choice-1-1").checked == true) {
    radiobuttonfinal = radiobutton1;
}
else if (document.getElementById("radio-choice-2-2").checked == true) {
    radiobuttonfinal = radiobutton2;
}
//setting the value of radio button to a single switching variable
var row = table.insertRow(1);
var cell4 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell2 = row.insertCell(2);

if (nameInput2 != ""  && radiobuttonfinal != 0 ) {
    cell4.innerHTML = '<input id="Button" type="button" value="Delete" />';
    // JUST A BULLET HERE WITH AN ONCLICK FUNCTION THAT REMOVES THE ROW WITH var Delete = row.delete(0);
    //will have a bullet point
    cell1.innerHTML = nameInput2;
    //Title prints user input of title
    cell2.innerHTML = radiobuttonfinal;
    //Type prints user input of type
    cell3.innerHTML = GetStatus2();
}
//if there is an entry in title and a radio button checked, it pushes it
alert(nameInput2 + " has been added to your WishList\n\nClick View My WishList to view your WishList");   
//if there is an entry in title and a radio button checked, it pushes it
}
//Page two function checks questions and adds to wishlist

我的 HTML:

<div data-role="page" id="pagetwo">
    <div> <center>
        <h2> My WishList </h2>
    </div>
    <div>
        <table align="center" style= "width:100%" id="WishListTable"> 
            <tr>
                <td> </td>
                <td> Title </td>
                <td> Type </td>
                <td> Status </td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
<center> <h5> Title: </h5>
    <input type="text" name="WishListSearch" id="API2" class = "APIClass2">
    <fieldset data-role="tvmshowtype">
    <legend style = "text-align:center"> <h4> Type: </h4> </legend>
    <input type="radio" name="radio-choice" id="radio-choice-1-1" value="TV Show"/>
    <label for="radio-choice-1-1" style = "text-align:center">TV Show</label>
    <input type="radio" name="radio-choice" id="radio-choice-2-2" value="Movie"/>
    <label for="radio-choice-2-2" style = "text-align:center">Movie</label>
    </fieldset>
        <button onclick="AddToWishlist2()"> Add to My WishList</button>

Answer 1

Working fiddle

1. 将类 delete-row 添加到您的删除按钮:

   cell4.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row"/>';
   

2. 使用 jquery on() 点击事件，如下代码:

   $(document).on('click','.delete-row', function(){
        $(this).parents('tr').remove();
   });
   

完整代码:

AddToWishlist2 = function() {
    var table = document.getElementById("WishListTable");
    nameInput2 = document.getElementById("API2").value;
    //search2();
    radiobutton1 = document.getElementById("radio-choice-1-1").value;
    radiobutton2 = document.getElementById("radio-choice-2-2").value;
    // this sets the value to TV show or Movie

    if (document.getElementById("radio-choice-1-1").checked == true) {
        radiobuttonfinal = radiobutton1;
    }
    else if (document.getElementById("radio-choice-2-2").checked == true) {
        radiobuttonfinal = radiobutton2;
    }
    //setting the value of radio button to a single switching variable
    var row = table.insertRow(1);
    var cell4 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell2 = row.insertCell(2);

    if (nameInput2 != ""  && radiobuttonfinal != 0 ) {
        cell4.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row"/>';
        // JUST A BULLET HERE WITH AN ONCLICK FUNCTION THAT REMOVES THE ROW WITH var Delete = row.delete(0);
        //will have a bullet point
        cell1.innerHTML = nameInput2;
        //Title prints user input of title
        cell2.innerHTML = radiobuttonfinal;
        //Type prints user input of type
        cell3.innerHTML = GetStatus2();
    }
    //if there is an entry in title and a radio button checked, it pushes it
    alert(nameInput2 + " has been added to your WishList\n\nClick View My WishList to view your WishList");   
    //if there is an entry in title and a radio button checked, it pushes it
}
//Page two function checks questions and adds to wishlist

$(document).on('click','.delete-row', function(){
	$(this).parents('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="pagetwo">
    <div> <center>
        <h2> My WishList </h2>
    </div>
    <div>
        <table align="center" style= "width:100%" id="WishListTable"> 
            <tr>
                <td> </td>
                <td> Title </td>
                <td> Type </td>
                <td> Status </td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
<center> <h5> Title: </h5>
    <input type="text" name="WishListSearch" id="API2" class = "APIClass2">
    <fieldset data-role="tvmshowtype">
    <legend style = "text-align:center"> <h4> Type: </h4> </legend>
    <input type="radio" name="radio-choice" id="radio-choice-1-1" value="TV Show"/>
    <label for="radio-choice-1-1" style = "text-align:center">TV Show</label>
    <input type="radio" name="radio-choice" id="radio-choice-2-2" value="Movie"/>
    <label for="radio-choice-2-2" style = "text-align:center">Movie</label>
    </fieldset>
        <button onclick="AddToWishlist2()"> Add to My WishList</button>