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

Question

So what it does it creates a to do list.那么它所做的就是创建一个待办事项列表。 You add and select a category in the first input field and then in the second you create a TR which contains 4 tds with information such as the number of the list, date, the chosen category and the chosen second user input.您在第一个输入字段中添加并选择一个类别，然后在第二个输入字段中创建一个 TR，其中包含 4 个 tds，其中包含诸如列表编号、日期、所选类别和所选第二个用户输入等信息。 With my code I can select and delete categories but I'm having trouble figuring out how to target the TR with multiple TD's in it.使用我的代码，我可以选择和删除类别，但我无法弄清楚如何定位包含多个 TD 的 TR。

HTML 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 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

Based on the code you have given I found.remove(), so if that is the intended 'TD' you are trying to remove and you want relevant TR you can try "parent().remove()" which will remove 'TR' completely.根据您提供的代码，我找到了.remove()，因此，如果这是您要删除的预期“TD”并且想要相关的 TR，您可以尝试“parent().remove()”，它将删除 'TR ' 完全地。 sample Js:示例 J：

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

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

问题描述

1 个解决方案

解决方案1
0 2019-12-15 13:59:20

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

问题描述

1 个解决方案

解决方案1 0 2019-12-15 13:59:20

解决方案1
0 2019-12-15 13:59:20