मेरे पास यह कोड है जो तालिका में इनपुट जोड़ता है। मैं एक ऐसा फ़ंक्शन बनाना चाहता हूं जो तालिका में अंतिम जोड़ी गई पंक्ति को हटा दे।
यहाँ वह कोड है जो मेरे पास है:

function add() {
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.getElementById("output");
  name = name.value;
  surname = surname.value;
  output.innerHTML += "<tr><td>" + name + "</td><td>" + surname + "</td></tr>"
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- scale=1.0">
  <title>Document</title>
  <style>
    table,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>

  <form action="">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name">
    </div>
    <div>
      <label for="name">Surname</label>
      <input type="text" id="surname">
    </div>
  </form>
  <input type="button" onclick="add();" value="Add">
  <input type="button" onclick="remove();" value="Remove">
  <div>
    <table id="output">
      <thead>
        <td>Name</td>
        <td>Surname</td>
      </thead>
      <tbody></tbody>
    </table>
  </div>


</body>

</html>

उदाहरण के लिए यदि मैं अपनी तालिका में और पंक्तियां दर्ज करता हूं और यदि मैं अपने निकालें बटन पर क्लिक करता हूं तो यह तालिका में दर्ज किए गए अंतिम तत्व को हटा देगा।

1
itmemilan 21 नवम्बर 2021, 19:38
कोड के साथ अब तक आपको क्या समस्या है?
 – 
evolutionxbox
21 नवम्बर 2021, 19:39
मुझे कोड के साथ कोई समस्या नहीं है, मैं सिर्फ एक फ़ंक्शन को हटाना चाहता हूं () जो तालिका में अंतिम जोड़े गए इनपुट को हटा देगा
 – 
itmemilan
21 नवम्बर 2021, 19:40
पहले किसी फ़ंक्शन को लागू करने का प्रयास करने पर विचार करें, और फिर यदि आप किसी समस्या का सामना करते हैं तो वापस आएं?
 – 
evolutionxbox
21 नवम्बर 2021, 19:40
खैर मैंने कोशिश की और मुझे नहीं पता कि आप मुझे कैसे मार्गदर्शन कर सकते हैं?
 – 
itmemilan
21 नवम्बर 2021, 19:41
2
तालिका की rows संपत्ति सभी पंक्तियों की एक सरणी जैसी वस्तु है। आप इसे अंतिम प्राप्त करने के लिए अनुक्रमित कर सकते हैं, और फिर इसे हटाने के लिए .remove() पर कॉल कर सकते हैं। इसका कौन सा हिस्सा परेशानी भरा है?
 – 
Barmar
21 नवम्बर 2021, 19:41

1 उत्तर

सबसे बढ़िया उत्तर

हटाने के लिए .lastElementChild प्रॉपर्टी का इस्तेमाल करें तालिका में अंतिम बार tr टैग जोड़ा गया

function add() {
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.getElementById("output");
  name = name.value;
  surname = surname.value;
  output.innerHTML += "<tr><td>" + name + "</td><td>" + surname + "</td></tr>"
}

function remove() {
  var output = document.getElementById("output");
output.lastElementChild.remove();
}
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<form action="">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name">
  </div>
  <div>
    <label for="name">Surname</label>
    <input type="text" id="surname">
  </div>
</form>
<input type="button" onclick="add();" value="Add">
<input type="button" onclick="remove();" value="Remove">
<div>
  <table id="output">
    <thead>
      <td>Name</td>
      <td>Surname</td>
    </thead>
    <tbody></tbody>
  </table>
</div>
1
Rana 21 नवम्बर 2021, 19:47