JQuery के साथ एक तालिका पंक्ति को हटाने का सबसे अच्छा तरीका क्या है?

Question

JQuery के साथ एक तालिका पंक्ति को हटाने के लिए सबसे अच्छी विधि क्या है?

Comments

यहाँ उत्कृष्ट लेख है codepedia.info/2015/02/remove-table-row-tr-in-jquery कैसे भी गतिशील रूप से जोड़ा पंक्तियाँ के लिए तालिका पंक्ति को दूर करने पर

— सिंह सतिंदर

Answer 1

आप सही हे:

$('#myTableRow').remove();

यह ठीक काम करता है यदि आपकी पंक्ति में एक है id, जैसे:

<tr id="myTableRow"><td>blah</td></tr>

यदि आपके पास नहीं है id, तो आप चयनकर्ताओं के किसी भी jQuery के ढेर सारे का उपयोग कर सकते हैं ।

Comments

हाँ, मैं मान रहा था कि पंक्ति में एक आईडी है और आपके पास आईडी है :)

— डैरिल हेन

इस तरह से करने का मतलब है कि आपको प्रति पंक्ति एक आईडी की आवश्यकता है जो संभावित रूप से बहुत अधिक ओवरहेड जोड़ता है। jQuery अन्य दृष्टिकोणों की अनुमति देता है जो अधिक मुहावरेदार होते हैं (jQuery के दृष्टिकोण के लिए), पढ़ने पर ले जाने के लिए अधिक सुझाव हैं।

— इवान लुईस

मेरे लिए महान काम किया क्योंकि मैं प्रत्येक पंक्ति में अद्वितीय आईडी लगाने में सक्षम था।

— जिम इवांस

गज़ब की चीज़ें! JQuery भविष्य है!

— हेन्कासनेर

"जेफ, एक बहुतायत क्या है?"

— पीट

Answer 2

$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

एक बेहतर भी

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

Comments

अजीब, आपका समाधान स्वीकार किए जाते हैं की तुलना में असीम रूप से बेहतर है।

— साइप्रस में आराम

@ जोर्ग, सिर्फ इसका उल्लेख करने के लिए, आपके पास अपने जवाब में एक टाइपो है, .click के बाद आपको फंक्शन () कॉल बैक करना होगा

— फ्रेंको

भी $ (यह) .closest ('tr')। remove ();

— लेरॉय

Answer 3

मान लें कि आपके टेबल में डेटा सेल के अंदर एक बटन / लिंक है, तो कुछ इस तरह होगा ट्रिक ...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

यह बटन के माता-पिता / लिंक पर क्लिक किए गए लिंक को हटा देगा। आपको पैरेंट () का उपयोग करने की आवश्यकता है क्योंकि यह एक jQuery ऑब्जेक्ट है, न कि एक सामान्य DOM ऑब्जेक्ट, और आपको दो बार पेरेंट () का उपयोग करने की आवश्यकता है, क्योंकि बटन एक डेटा सेल के अंदर रहता है, जो एक पंक्ति के अंदर रहता है .... जो है आप क्या हटाना चाहते हैं। $ (यह) बटन पर क्लिक किया गया है, इसलिए केवल इस तरह से कुछ होने से केवल बटन को हटा दिया जाएगा:

$(this).remove();

जबकि यह डेटा सेल को हटा देगा:

    $(this).parent().remove();

यदि आप इसे हटाने के लिए केवल पंक्ति पर कहीं भी क्लिक करना चाहते हैं तो यह कुछ इस तरह काम करेगा। आप उपयोगकर्ता को संकेत देने या केवल एक डबल-क्लिक पर काम करने के लिए इसे आसानी से संशोधित कर सकते हैं:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

उम्मीद है कि मदद करता है ... मैं इस पर थोड़ा संघर्ष किया।

Comments

क्या होगा यदि लिंक सीधे td के अंदर नहीं है, लेकिन कहते हैं, इसके चारों ओर एक स्पैन है? मुझे लगता है कि $ (यह) .parents ('tr') करना बेहतर होगा। इसे स्वयं डोम ट्री तक चलने दें, ट्र को ढूंढें, और इसे हटा दें।

— पाओलो बरगीनो

वह भी काम करेगा। यह सब इस बात पर निर्भर करता है कि DOM में आपका बटन / लिंक कहां है, यही वजह है कि मैंने इतने सारे उदाहरण और इतनी लंबी व्याख्या दी।

— स्लॉथर

आप $ (यह) .parents ('tr')

— cgreeno

.Live को jQuery 1.7 में हटा दिया गया था, और 1.9 में हटा दिया गया था। देखें jQuery.live

Answer 4

आप उपयोग कर सकते हैं:

$($(this).closest("tr"))

किसी तत्व की मूल तालिका पंक्ति को खोजने के लिए।

यह माता-पिता () की तुलना में अधिक सुरुचिपूर्ण है। माता-पिता (जो कि मैंने करना शुरू कर दिया है और जल्द ही अपने तरीकों की त्रुटि सीख ली है।

--Edit - किसी ने बताया कि प्रश्न पंक्ति को हटाने के बारे में था ...

$($(this).closest("tr")).remove()

जैसा कि नीचे बताया गया है आप बस कर सकते हैं:

$(this).closest('tr').remove();

एक समान कोड स्निपेट का उपयोग कई ऑपरेशनों के लिए किया जा सकता है जैसे कि कई तत्वों पर फायरिंग इवेंट।

Comments

थोड़ा और रसीला:$(this).closest("tr").remove()

— बैरी केये

Answer 5

आसान .. यह कोशिश करो

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

Comments

मैं बदल जाएगा $(this).parent().parent().parent()करने के लिए $(this).closest('tr')। यह अधिक मजबूत है और स्पष्ट रूप से दिखाता है कि आप क्या चयन कर रहे हैं।

— निकफ

Answer 6

निम्नलिखित स्वीकार्य है:

$('#myTableRow').remove();

Answer 7

function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

शायद इस तरह से कुछ काम कर सकता है? मैंने "यह" के साथ कुछ करने की कोशिश नहीं की है, इसलिए मुझे नहीं पता कि यह काम करता है या नहीं।

Comments

ठीक है, मैं कहूंगा कि जब आप उस पर क्लिक करेंगे तो पंक्ति थोड़ी अजीब होगी। फिलहाल मेरे पास पंक्ति को हटाने के लिए पंक्ति में एक लिंक है।

— डैरिल हेन

Answer 8

आपको बस <tr>अपनी टेबल से टेबल रो ( ) टैग को हटाना है । उदाहरण के लिए यहाँ तालिका से अंतिम पंक्ति को हटाने का कोड है:

$('#myTable tr:last').remove();

* ऊपर कोड इस jQuery के Howto पोस्ट से लिया गया था ।

Answer 9

आकार के लिए यह प्रयास करें

$(this).parents('tr').first().remove();

पूरी सूची:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
      });

    function DeleteRow()
    {
      $(this).parents('tr').first().remove();
    }
  </script>
</head>
<body>
  <table>
    <tr><td>foo</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bar bar</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bazmati</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
  </table>
</body>
</html>

इसे कार्रवाई में देखें

Answer 10

एक और एक द्वारा empty():

$(this).closest('tr').empty();

Comments

क्या यह सभी <td> का नहीं, बल्कि <tr> को हटाता है? मुझे लगता है कि ब्राउज़र स्वचालित रूप से <tr> निकाल सकता है, लेकिन मुझे संदेह है कि इसकी कोई गारंटी नहीं है।

— डैरिल हेन

Answer 11

यदि आप जिस पंक्ति को हटाना चाहते हैं वह बदल सकती है तो आप इसका उपयोग कर सकते हैं। बस इस फ़ंक्शन को पास करें # आप हटाना चाहते हैं।

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}

Answer 12

$('tr').click(function()
 {
  $(this).remove();
 });

मुझे लगता है कि आप उपरोक्त कोड की कोशिश करेंगे, क्योंकि यह काम करता है, लेकिन मुझे नहीं पता कि यह कुछ समय के लिए क्यों काम करता है और फिर पूरी तालिका हटा दी जाती है। मैं भी पंक्ति को क्लिक करके पंक्ति को हटाने का प्रयास कर रहा हूं। लेकिन सटीक उत्तर नहीं मिला।

Comments

मुझे यकीन नहीं है कि अगर आपने पहले से ही $ ('tr') की कोशिश की है। लाइव ("क्लिक", फ़ंक्शन () {$ (यह) .remove ();});

— gfivehost

Answer 13

अगर आपके पास ऐसा HTML है

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

जहां userid="123"एक कस्टम विशेषता है कि आप तालिका बनाते समय गतिशील रूप से आबाद कर सकते हैं,

आप कुछ का उपयोग कर सकते हैं

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

तो उस स्थिति में आप TRटैग की कक्षा या आईडी नहीं जानते हैं, लेकिन वैसे भी आप इसे हटाने में सक्षम हैं।

Comments

लगता है कि लाइव अब $ ("स्पैनसर") के पक्ष में पदावनत हो गया है। ('क्लिक', फंक्शन () {

— टोफुवारियर

Answer 14

मैं सराहना करता हूं कि यह एक पुरानी पोस्ट है, लेकिन मैं ऐसा ही करना चाह रहा था, और पाया कि स्वीकृत उत्तर मेरे लिए काम नहीं करता। यह मानते हुए कि यह लिखा गया था, तब तक JQuery चालू हो गया।

किसी भी तरह, मुझे लगता है कि मेरे लिए निम्नलिखित काम किया:

$('#resultstbl tr[id=nameoftr]').remove();

यकीन नहीं होता कि यह किसी की मदद करता है। ऊपर दिया गया मेरा उदाहरण एक बड़े समारोह का हिस्सा था इसलिए इसे एक इवेंट श्रोता में नहीं लपेटा गया।

Answer 15

यदि आप बूटस्ट्रैप टेबल्स का उपयोग कर रहे हैं

इस कोड स्निपेट को अपने बूटस्ट्रैप_टेबल्स में जोड़ें। js

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

फिर अपने में var allowedMethods = [

जोड़ना 'removeRow'

अंत में आप उपयोग कर सकते हैं $("#your-table").bootstrapTable('removeRow',{index:1});

इस पोस्ट का श्रेय

Answer 16

आईडी अब एक अच्छा चयनकर्ता नहीं है। आप पंक्तियों पर कुछ गुणों को परिभाषित कर सकते हैं। और आप उन्हें चयनकर्ता के रूप में उपयोग कर सकते हैं।

<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>

और आप पंक्ति का चयन इस तरह से कर सकते हैं (ES6):

const rowRemover = (category,type)=>{
   $(`tr[category=${category}][type=${type}]`).remove();
}

rowRemover('petshop','fish');

Answer 17

तालिका से पंक्तियाँ निकालने की सबसे आसान विधि:

1. अपनी विशिष्ट आईडी का उपयोग करके तालिका की पंक्ति निकालें।
2. उस पंक्ति के क्रम / सूचकांक के आधार पर निकालें। Ex: तीसरी या पाँचवीं पंक्ति को हटा दें।

उदाहरण के लिए:

 <table id='myTable' border='1'>
    <tr id='tr1'><td>Row1</td></tr>
    <tr id='tr2'><td>Row2</td></tr>
    <tr id='tr3'><td>Row3</td></tr>
    <tr id='tr4'><td>Row4</td></tr>
    <tr id='tr5'><td>Row5</td></tr>
  </table>

//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();

//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3