JQuery সহ কোনও টেবিল সারি অপসারণ করার সর্বোত্তম উপায় কী?

Question

JQuery সহ টেবিল সারি অপসারণের জন্য সেরা পদ্ধতিটি কী?

Comments

এখানে দুর্দান্ত নিবন্ধ কোডেপিডিয়া . info/2015/02/ remove-table-row- tr-in- জজ এমনকি কীভাবে গতিশীলভাবে যুক্ত সারিগুলির জন্য টেবিল সারিটি সরিয়ে ফেলতে হবে

— সটিন্দার সিংহ

Answer 1

তুমি ঠিক বলছো:

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

আপনার সারিটিতে যদি এমন থাকে তবে এটি দুর্দান্ত কাজ করে id:

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

আপনার যদি না থাকে তবে আপনি idjQuery এর যে কোনও আধিকারিককে নির্বাচকদের আধিক্য ব্যবহার করতে পারেন ।

Comments

হ্যাঁ, আমি ধরে নিচ্ছিলাম যে সারিটির একটি আইডি রয়েছে এবং আপনার আইডি রয়েছে :)

— ড্যারিল হেইন

এইভাবে এটি করার অর্থ এই নয় যে আপনার সারিতে প্রতি একটি আইডি প্রয়োজন যা সম্ভাব্যভাবে প্রচুর ওভারহেড যুক্ত করে। jQuery এমন অন্যান্য পদ্ধতির মঞ্জুরি দেয় যা আরও মুশকিল (jQuery এর পদ্ধতির কাছে), পড়ার বিষয়ে আরও পরামর্শ রয়েছে।

— ইয়ান লুইস

আমি প্রতিটি সারিতে অনন্য আইডি রাখতে সক্ষম হওয়ায় আমার পক্ষে দুর্দান্ত কাজ করেছে।

— জিম ইভান্স

চমৎকার উপাদান! JQuery ভবিষ্যত!

— হিঙ্কাসনার

"জেফ, আধিক্য কি?"

— পিট

Answer 2

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

আরও ভাল একটি

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

Comments

অদ্ভুত, আপনার সমাধান গৃহীতটির চেয়ে অসীম ভাল।

— সাইপ্রাসে

@ জর্জ, কেবল এটি উল্লেখ করার জন্য, আপনার উত্তরে একটি টাইপো রয়েছে, ক্লিক করার পরে আপনাকে অবশ্যই ফাংশনটি () কলটি ফিরিয়ে রাখতে হবে

— ফ্রাঙ্কো

এছাড়াও $ (এটি)। ক্লোজস্ট ('টিআর')। অপসারণ ();

— লেআরয়

Answer 3

আপনার টেবিলের কোনও ডাটা সেলের ভিতরে আপনার বোতাম / লিঙ্ক রয়েছে বলে ধরে নেওয়া, এর মতো কিছু কৌশলটি চালিয়ে যাবে ...

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

এটি ক্লিক করা বোতাম / লিঙ্কের পিতামাতার অভিভাবককে সরিয়ে দেবে। আপনাকে প্যারেন্ট () ব্যবহার করতে হবে কারণ এটি jQuery অবজেক্ট, কোনও সাধারণ DOM অবজেক্ট নয়, এবং আপনাকে প্যারেন্ট () ব্যবহার করতে হবে দু'বার, কারণ বোতামটি একটি ডাটা কোষের অভ্যন্তরে থাকে যা একটি সারির অভ্যন্তরে থাকে .... যা আপনি কি সরাতে চান। this (এটি) বোতামটি ক্লিক করা হয়, সুতরাং এরকম কিছু থাকা কেবল বোতামটি সরিয়ে ফেলবে:

$(this).remove();

যদিও এটি ডেটা সেলটি সরিয়ে ফেলবে:

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

এটিকে সরাতে আপনি যদি সারিটির যে কোনও জায়গায় ক্লিক করতে চান তবে এই জাতীয় কিছু কাজ করবে। আপনি ব্যবহারকারীকে প্রম্পট করতে বা এটি কেবলমাত্র একটি ডাবল ক্লিকের জন্য সহজেই এটিকে সংশোধন করতে পারেন:

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

আশা করি এটি সাহায্য করবে ... আমি নিজেই এই বিষয়ে লড়াই করেছি।

Comments

যদি লিঙ্কটি সরাসরি টিডির ভিতরে না থাকে তবে তার চারপাশে একটি স্প্যান থাকে? আমি মনে করি এটি করা ভাল $ (এটি) .পিতা ('টিআর')। অপসারণ (); এটিকে নিজেই ডিওএম গাছের উপরে উঠে যেতে, ট্রাকে খুঁজে পেতে এবং এটি সরাতে।

— পাওলো বার্গান্টিনো

যে খুব কাজ করবে। এটি সমস্ত কিছুর উপর নির্ভর করে যে আপনার বোতাম / লিংকটি ডোমটিতে রয়েছে, সেই কারণেই আমি এতগুলি উদাহরণ এবং এত দীর্ঘ ব্যাখ্যা দিয়েছি।

— স্লথার

আপনি $ (এটি)। প্যারেন্টস ('টিআর')

— সিগ্রিনো

.live jQuery 1.7 এ অবচয় করা হয়েছিল এবং 1.9-এ সরানো হয়েছিল। JQuery.live

Answer 4

তুমি ব্যবহার করতে পার:

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

কোনও উপাদানটির পিতৃ সারণী সারিটি সন্ধান করার জন্য।

এটি পিতামাতার ()। পিতামাতার () এর চেয়ে আরও মার্জিত এটি যা আমি শুরু করেছিলাম এবং শীঘ্রই আমার উপায়গুলির ত্রুটিটি শিখেছি।

- সম্পাদনা - কেউ উল্লেখ করেছেন যে প্রশ্নটি সারিটি সরিয়ে দেওয়ার বিষয়ে ...

$($(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')। এটি আরও দৃust় এবং আপনি কী নির্বাচন করছেন তা স্পষ্টভাবে দেখায়।

— নিকফ

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 হাওটো পোস্ট থেকে নেওয়া হয়েছিল ।

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

আপনি ইতিমধ্যে $ ('টিআর') চেষ্টা করেছেন কিনা তা নিশ্চিত নই।

— gfivehost

Answer 13

আপনার যদি এইচটিএমএল থাকে

<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

লাইভ এখন অন, on ("। স্প্যান ইউজার") এর পক্ষে বাতিল করা হয়েছে বলে মনে করুন ('ক্লিক করুন', ফাংশন () {

— তোফুয়ারিয়র

Answer 14

আমি এটি একটি পুরানো পোস্টের প্রশংসা করি, তবে আমিও এটি করার চেষ্টা করছিলাম, এবং প্রাপ্ত উত্তরটি আমার পক্ষে কার্যকর হয়নি। ধরে নেওয়া যায় যে জিকুয়েরি এটি লেখা হয়েছিল।

যাইহোক, আমি নিম্নলিখিতটি আমার জন্য কাজ করেছেন:

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

এটি কারও সাহায্য করে কিনা তা নিশ্চিত নয়। উপরে আমার উদাহরণটি বৃহত্তর ফাংশনের অংশ ছিল তাই এটি ইভেন্ট শ্রোতার কাছে আবৃত করা হয়নি।

Answer 15

আপনি যদি বুটস্ট্র্যাপ টেবিল ব্যবহার করেন

এই কোড স্নিপেটটি আপনার বুটস্ট্র্যাপ_টিটেবল.জেজে যুক্ত করুন

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. সেই সারির ক্রম / সূচকের ভিত্তিতে সরান। উদাহরণস্বরূপ: তৃতীয় বা পঞ্চম সারিটি সরান।

উদাহরণ স্বরূপ:

 <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