Question

那么它会创建一个待办事项列表。您在第一个输入字段中添加并选择一个类别，然后在第二个字段中创建一个TR，其中包含4个tds，其中包含诸如列表编号，日期，所选类别和所选第二个用户输入之类的信息。通过我的代码，我可以选择和删除类别，但是我在弄清楚如何定位包含多个TD的TR时遇到了麻烦。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">

        <script src="javascript.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="style.js"></script>


</head>

<body>
        <div class="page-header text-center bg-primary mb-1">
                <h1>Opravila</h1>
            </div>

            <div class="container">
                    <div class="row m-3">
                    <div class="col-md-6">
                    <div class="input-group mb-2 mt-2">
                            <input type="text" class="form-control mr-2" id = "dodaj" name="additem">
                            <button id="add" class="btn btn-primary mr-2" onclick="newElement()">Dodaj</button>
                            <button id="remove" class="btn btn-primary" class="remove" >Zbriši</button>
                        </div>
                        <ul id="kategorija" class="notes" class="list-group">
                                <li  class="list-group-item">Vaje</li>
                                <li  class="list-group-item">Treningi</li>
                                <li  class="list-group-item">Projekt</li>
                            </ul>  
                        </div>

        <div class="col-md-6">
             <div class="input-group mb-2 mt-2"> 
                    <input type="text" id = "opravila" class="form-control mr-2"> 
                    <button id="add2" onclick="AddTo()" class="btn btn-primary">Dodaj</button>           
                </div>
                <table class="table table-striped table-hover">
<table class="table table-striped table-hover">
        <thead>
            <tr>
                <th id="number">#</th>
                <th id="desc">Opis</th>
                <th id="category">Kategorija</th>
                <th id="time">Datum vnosa</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button id="removerino" class="btn btn-danger">Brisi</button>
</div>
</div>
</div>

<div class="page-footer text-center bg-secondary p-3">
<p class="m-0">OSS Vaja 5 - jQuery in Bootstrap</p>
</div>

</body>
</html>

JS

var counter = 0;


$(document).on('click', '.list-group-item', function(){ 
  $('.list-group-item')
    .css({ "font-weight": 'normal', "text-decoration": 'none'})
    .removeClass("selectedItem");

  $(this)
    .css({"font-weight": 'bold', "text-decoration": 'underline'})
    .addClass("selectedItem");
});

$(function(){
  $("#add").click(function(){
    var addItem = $("#dodaj").val();
    if(addItem.length > 0) {  
      $("ul").append($('<li class="list-group-item"></li>)').text(addItem));
      $("#dodaj").val("");
    }
  });

  $("#remove").click(function() {
    $(".selectedItem").remove();
  });
  $("#removerino").click(function() {
    $(".selectedItem").remove();
  });
});










function AddTo(){
  var currentdate = new Date(); 
    var datetime = currentdate.getDate() + "/"
                + (currentdate.getMonth()+1)  + "/" 
                + currentdate.getFullYear() + " @ "  
                + currentdate.getHours() + ":"  
                + currentdate.getMinutes() + ":" 
                + currentdate.getSeconds();

counter++;
var td1 = counter;
var td2 = document.getElementById('opravila').value;
var td3 = document.getElementsByClassName("selectedItem")[0].innerText;
var td4 = datetime;

$("tbody").append("<tr>" + "</tr>");
  $("tr").last().append("<td>" +td1+  "</td");
    $("td").last().append("<td>" +td2+"</td");
      $("td").last().append("<td>" +td3+"</td");
        $("td").last().append("<td>" +td4+"</td");
          $("tr").last().attr("<td>" +td1+  "</td");





}

Answer 1

基于您给我的代码found.remove（），因此，如果这是您要删除的目标“ TD”，并且想要相关的TR，则可以尝试“ parent（）。remove（）”，完全删除“ TR”。样本Js：

  $("#remove").click(function() {
  $(".selectedItem").parent().remove();
  });
  $("#removerino").click(function() {
   $(".selectedItem").parent().remove();
    });

如何选择和删除具有多个td的TR元素？

1 个答案: