Удалить ближайший tr и его потомки - PullRequest
Новая
       1

Удалить ближайший tr и его потомки

0 голосов
/ 18 февраля 2020

У меня есть следующий код, где я могу удалить ближайший tr с помощью функции удаления, но я хочу создать еще одну функцию с именем delete-contato, где он будет удалять ближайший tr и его дочерние элементы, то есть все «электронная почта» и «telefone» связанный с этим "contato". 

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


        x--;
    })

Это скрипка со сценарием и фрагмент: 

// 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 или Ново Телефоне. Так что после нажатия удалить на Contanto я хочу, чтобы все эти новые входы были удалены. Nome, Car go, E-mail, Telefone и другие генерируемые Outro Emails и Outros Telefone.

Прямо сейчас, когда вы удаляете Contato, Outro Telefone и Outro Email, остаются.

Ответы [ 3 ]

0 голосов
/ 18 февраля 2020

Используйте .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>
0 голосов
/ 18 февраля 2020

Вы можете удалить родительский "tr", используя .parents('tr')

 $(wrapper).on("click", ".delete", function(e) {
     e.preventDefault();
     $(this).parents('tr').remove();    
     x--;
  });

$(wrapper).on("click", ".delete-contato", function(e) {
    e.preventDefault();
    //$(this).closest('tr').remove(); // this will also work
    $(this).parents('tr').remove(); // // this will also work 
    x--;
  })
0 голосов
/ 18 февраля 2020

Вам необходимо присвоить идентификаторы дочерним строкам. Я сделал это для контакта по электронной почте, который вы можете увидеть в моей скрипке ниже. Вам нужно применить те же методы к нажатию кнопки телефона.

Обратите внимание, что я добавил «data-row-id» к вашим TR и именам классов, чтобы связать строки с его родителями.

Working Fiddle : 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>        
      `)
    }
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...