Как удалить созданную таблицу из div, используя ее идентификатор?

Question

Я создал один div, который невидим, в нем скрыта основная таблица div, и я клонирую эту таблицу в другой div. что div id равен main-div.

Я хочу удалить вновь сгенерированную таблицу из этого div, используя ее идентификатор таблицы, какая-либо подсказка?

var aggTableNum = 0;
$('.addAggregatorCompo').click(function (e) {
  const originTable = document.getElementById('aggregator-table');
   let newTable = originTable.cloneNode(true);
   newTable.id = 'newAggTable' + ++aggTableNum;
   newTable.querySelectorAll('input').forEach((element) => {
    element.value = '';
  });
   $('#main-div').append(newTable);
  //attach();
});

// write delete table using its id
$('.component-base, .generate-div').on(
  'click',
  '.delete-component',
  function (e) {
    console.log(e.delegateTarget.id);
 }
);

#aggregator-table {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
        <thead>
          
        <th colspan="6">Aggregator</th>
    
        <tr>
          <th> Column Name </th>
          <th> Function </th>
          <th> Alias </th>
          <th> Order </th>
      
        </tr>
        </thead>
        <tbody>
        <tr>
      
          <td>
            <input>
            </input>
          </td>
          <td><input>
            </input></td>
          <td>
            <input>
            </input>
          </td>
            <td>
              <input>
              </input>
            </td>
        </tr>
        <tr>
          <td>
        <button style="margin: 1%" onclick="addAgg(this,event)">add Properties</button>
        <!-- <button style="margin: 1%">add Properties</button> -->
        </td>
        <td>
          <button class="delete-component" style="margin: 1%">delete </button>
        </td>
      </tr>
      </tbody>
      </table>
      <div class="generate-div" id="main-div"></div>

JsFiddle Linke: -> https://jsfiddle.net/shreekantbatale2/1w08ksfa/2/

Answer 1

Делегируйте щелчок и найдите ближайшую таблицу

---

$('#main-div').on("click", ".delete-component",function(e) {
  e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form
  this.closest("table").remove();
})

var aggTableNum = 0;
$('.addAggregatorCompo').click(function(e) {
  const originTable = document.getElementById('aggregator-table');
  let newTable = originTable.cloneNode(true);
  newTable.id = 'newAggTable' + ++aggTableNum;
  newTable.querySelectorAll('input').forEach((element) => {
    element.value = '';
  });
  $('#main-div').append(newTable);
  //attach();
});

$('#main-div').on("click", ".delete-component", function(e) {
  this.closest("table").remove();
})


// write delete table using its id
$('.component-base, .generate-div').on(
  'click',
  '.delete-component',
  function(e) {
    console.log(e.delegateTarget.id);
  }
);

#aggregator-table {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
  <thead>

    <th colspan="6">Aggregator</th>

    <tr>
      <th> Column Name </th>
      <th> Function </th>
      <th> Alias </th>
      <th> Order </th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td>
        <input>
        </input>
      </td>
      <td><input>
        </input>
      </td>
      <td>
        <input>
        </input>
      </td>
      <td>
        <input>
        </input>
      </td>
    </tr>
    <tr>
      <td>
        <button style="margin: 1%" onclick="addAgg(this,event)">add Properties</button>
        <!-- <button style="margin: 1%">add Properties</button> -->
      </td>
      <td>
        <button class="delete-component" style="margin: 1%">delete </button>
      </td>
    </tr>
  </tbody>
</table>
<div class="generate-div" id="main-div"></div>

Если вы ДОЛЖНЫ, вы можете сделать

const id = 'newAggTable' + $('#main-div').find("table").length;
$newTable.prop("id",id);
$newTable.find(".delete-component").data("id",id);

и позже

$('#main-div').on("click", ".delete-component", function(e) {
  $("#"+$(this).data("id")).remove();
})

var aggTableNum = 0;
$('.addAggregatorCompo').click(function(e) {
  const $originTable = $('#aggregator-table');
  let $newTable = $originTable.clone(true);
  const id = 'newAggTable' + $('#main-div').find("table").length;
  $newTable.prop("id",id)
  $newTable.find('input').each(element => $(element).val(''));
  $('#main-div').append($newTable);
  $newTable.find(".delete-component").data("id",id)
});

$('#main-div').on("click", ".delete-component", function(e) {
  $("#"+$(this).data("id")).remove();
})


// write delete table using its id
$('.component-base, .generate-div').on(
  'click',
  '.delete-component',
  function(e) {
    console.log(e.delegateTarget.id);
  }
);

#aggregator-table {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
  <thead>

    <th colspan="6">Aggregator</th>

    <tr>
      <th> Column Name </th>
      <th> Function </th>
      <th> Alias </th>
      <th> Order </th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td>
        <input>
        </input>
      </td>
      <td><input>
        </input>
      </td>
      <td>
        <input>
        </input>
      </td>
      <td>
        <input>
        </input>
      </td>
    </tr>
    <tr>
      <td>
        <button style="margin: 1%" onclick="addAgg(this,event)">add Properties</button>
        <!-- <button style="margin: 1%">add Properties</button> -->
      </td>
      <td>
        <button class="delete-component" style="margin: 1%">delete </button>
      </td>
    </tr>
  </tbody>
</table>
<div class="generate-div" id="main-div"></div>

Answer 2

$(this).closest('table.component-base').remove();

удалит родительскую таблицу с классом "компонент-база".

Fiddle