Question

我有以下代码，可以使用delete函数删除最接近的tr，但我想创建另一个名为delete-contato的函数，该函数将删除最接近的tr及其子元素，即“ email”和“ telefone”与该“感染”相关联。

$(wrapper).on("click", ".delete-contato", function(e) {
        e.preventDefault();
        $(this).closest('tr').empty();


        x--;
    })

这是scenario的小提琴，下面是代码段：

// funcao para adicionar um novo input no Contato
$(document).ready(function() {
  var max_fields = 99;
  var wrapper = $(".container-contato");
  var add_button = $(".add-contato");
  var add_email = $(".add-email");
  var add_telefone = $(".add-telefone");

  var x = 1;

  $(add_email).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
        <tr>
          <td>
            <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
        
      `)
    }
  });

  $(add_telefone).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
       <tr>
          <td>
            <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()" placeholder="Outro Telefone"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
      `)
    }
  });

  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
          <tr>
            <td>
              <input type="text" class="nome" name="contato_rpps.nome['${x}']"/>    
            </td>
            <td>
              <input type="text" name="contato_rpps.cargo['${x}']"/>
            </td>
            <td>
              <input type="text" name="contato_rpps.email['${x}']"/>
              
            </td>
            <td>
              <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()"/>
            </td>
            <td>
              <a href="#" class="delete-contato">Delete</a>
            </td>
          </tr>
          `); //add input box

    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest('tr').empty();

    x--;
  })

  $(wrapper).on("click", ".delete-contato", function(e) {
    e.preventDefault();


    x--;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-contato">Novo Contato &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<button type="button" class="add-email">Novo Email &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<button type="button" class="add-telefone">Novo Telefone &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<div>
  <table>
    <tbody class="container-contato">
      <tr>
        <td>
          <label><br>Nome</label>
          <input type="text" name="contato_rpps.nome['1']" class="nome">
          <br>
        </td>
        <td>
          <label><br>Cargo</label>
          <input type="text" name="contato_rpps.cargo['1']" class="cargo">
        </td>
        <td>
          <label><br>Email</label>
          <input type="email" name="contato_rpps.email['1']" class="email">
        </td>
        <td>
          <label><br>Telefone</label>
          <input type="text" class="telefone" placeholder="(00) 90000-0000" onkeyup="phoneMask()" name="contato_rpps.telefone['1']" maxlength="15">
        </td>
      </tr>
    </tbody>
  </table>
</div>

我不认为我要明确说明什么。.当您按Novo Contato时，会创建一组新的输入，然后按Novo Email或Novo Telefone。因此，在Contanto上按Delete键后，我希望删除所有这些新输入。 Nome，Cargo，Email，Telefone和其他生成的Outros电子邮件和Outros Telefone。

现在，当您删除Contato时，Outro Telefone和Outro Email会保留。

Answer 1

您需要为子行分配标识符。我这样做是为了在下面的小提琴中看到您的电子邮件联系人。您需要对电话按钮单击应用相同的方法。

注意，我在您的TR和类名中添加了“ data-row-id”，以将行与其父级链接起来。

工作小提琴：https://jsfiddle.net/54uLrj8k/

 $(document).on("click", ".delete-contato", function(e) {
    e.preventDefault();
    $btn = $(this)
    $tr = $(this).closest('tr');
    $id = $tr.attr('data-row-id');
    $('.child-row-' + $id).remove();
    $tr.remove();

    x--;
  });

 $(add_email).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $lastContact = $('tbody.container-contato tr.row-main:last');
      $id = $lastContact.attr('data-row-id');

      $(wrapper).append(`
        <tr class="child-row child-row-${$id} email-row" data-row-id="${$id}">
          <td>
            <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>        
      `)
    }
  });

Answer 2

使用.parents('tr')并将其删除！

// funcao para adicionar um novo input no Contato
$(document).ready(function() {
  var max_fields = 99;
  var wrapper = $(".container-contato");
  var add_button = $(".add-contato");
  var add_email = $(".add-email");
  var add_telefone = $(".add-telefone");

  var x = 1;

  $(add_email).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
        <tr>
          <td>
            <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
        
      `)
    }
  });

  $(add_telefone).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
       <tr>
          <td>
            <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()" placeholder="Outro Telefone"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
      `)
    }
  });

  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
          <tr>
            <td>
              <input type="text" class="nome" name="contato_rpps.nome['${x}']"/>    
            </td>
            <td>
              <input type="text" name="contato_rpps.cargo['${x}']"/>
            </td>
            <td>
              <input type="text" name="contato_rpps.email['${x}']"/>
              
            </td>
            <td>
              <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()"/>
            </td>
            <td>
              <a href="#" class="delete-contato">Delete</a>
            </td>
          </tr>
          `); //add input box

    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest('tr').empty();

    x--;
  })

  $(wrapper).on("click", ".delete-contato", function(e) {
    e.preventDefault();

    $(this).parents('tr').remove()
    x--;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-contato">Novo Contato &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<button type="button" class="add-email">Novo Email &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<button type="button" class="add-telefone">Novo Telefone &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
<div>
  <table>
    <tbody class="container-contato">
      <tr>
        <td>
          <label><br>Nome</label>
          <input type="text" name="contato_rpps.nome['1']" class="nome">
          <br>
        </td>
        <td>
          <label><br>Cargo</label>
          <input type="text" name="contato_rpps.cargo['1']" class="cargo">
        </td>
        <td>
          <label><br>Email</label>
          <input type="email" name="contato_rpps.email['1']" class="email">
        </td>
        <td>
          <label><br>Telefone</label>
          <input type="text" class="telefone" placeholder="(00) 90000-0000" onkeyup="phoneMask()" name="contato_rpps.telefone['1']" maxlength="15">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

您可以使用pd.merge()

删除父级“ tr”

.parents('tr')

删除最接近的tr及其子元素

3 个答案: