Usuwanie wybranego wiersza w jQuery ?

pytanie zadane 26 lipca 2016 w JavaScript przez Patryk Rafał Bywalec (2,700 p.)

Jak w temacie usuwanie wybraengo wiersza w tabeli oto kod jQuery

kod html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src ="script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <input type="text" id="imie" placeholder="Podaj imie"></input>
    <div id="button"></div>
    <div class="tabela"></div>
  </body>
</html>

kod jQuery

$(document).ready(function(){

  $("#button").append("<button id='pokaz'>Pokaz</button>");

  $("#pokaz").click(function(){
  var usun = $("<button class = 'usun' >Usun</button>");
  var table = $("<table></table>");
  var wiersz = $("<tr></tr>");
  var komorka = $("<td>"+$("#imie").val()+"</td>");
  var komorka2 = $("<td></td>");
  komorka2.append(usun);
  wiersz.append(komorka);
  wiersz.append(komorka2);
  table.append(wiersz);
  $(".tabela").append(table);

  });


  });

Tak to wygląda

1 odpowiedź

odpowiedź 26 lipca 2016 przez xmentor Nałogowiec (49,520 p.)
wybrane 26 lipca 2016 przez Patryk Rafał

Najlepsza

click dla buttona o klasie 'usun' -> $(this).parent().remove()

komentarz 26 lipca 2016 przez Patryk Rafał Bywalec (2,700 p.)

dzięki kolego działa musiałem tylko do wiersza dopisać klase usun xd :) bo kasowało mi jedną komórke a nie cały wiersz xd

komentarz 26 lipca 2016 przez xmentor Nałogowiec (49,520 p.)

Na pewno działa? XD Tam powinno być dwa razy .parent() by usuwało wiersz.

komentarz 27 lipca 2016 przez Patryk Rafał Bywalec (2,700 p.)

witam teraz chcę zrobić żeby wiersze na bieżąco zmieniały numeracje napisałem taki kod ale nie działa

var i = 1;
var iloscWierszy = $("tr").length;
$(document).ready(function(){



  $("#button").append("<button id='pokaz'>Pokaz</button>");

  $("#pokaz").click(function(){

    if($("#imie").val() == "" || $("#nazwisko").val() == "")
    {
      $("#imie ,#nazwisko").css("background-color","pink");
      $("#imie ,#nazwisko").css("color","red");
      $("#blad").text("Brak danych");
      $("#blad").css("color","pink");

      return false;
    }else {
      $("#imie ,#nazwisko").css("background-color","lightgreen");
      $("#imie ,#nazwisko").css("color","black");
      $("#blad").text("");
    }

  var usun = $("<button class = 'usun' >Usun</button>");
  var table = $("<table id='tabela'></table>");
  var wiersz = $("<tr class='usun'></tr>");
  var numer = ("<td class='usun'>" + i + "</td>");
  var komorka = $("<td>"+$("#imie").val()+"</td>");
  var komorka2 = $("<td></td>");
  var komorka3= $("<td class = 'usun'>" + $("#nazwisko").val() + "</td>")

  komorka2.append(usun);
  wiersz.append(numer);
  wiersz.append(komorka);
  wiersz.append(komorka3);
  wiersz.append(komorka2);

  table.append(wiersz);
  $(".tabela").append(table);


  i++;

  $(".usun").click(function(){
    $(this).parent().remove();

    for(var i=0; i<iloscWierszy.length; i++)
    {
      iloscWierszy[i].html(i + 1);
    }

  });

  });



  });

o to sama funkcja zliczająca wiersze

$(".usun").click(function(){
    $(this).parent().remove();

    for(var i=0; i<iloscWierszy.length; i++)
    {
      iloscWierszy[i].html(i + 1);
    }

  });