Mam takie pytanie jak usunąć div w takim przypadku kiedy jest dynnamicznie tworzony
np.
I tutaj sytuacja wydaje się być prosta bo trzeba tylko wywołać funkcje $("#div_2").remove()
Ale ja mam jeszcze coś takiego
<button onclick="dodaj_tr()">
Czyli dodwania tr i jak mi doda nastepny tr to już nie mogę zastosowac licznika może da się to jakoś przez this zrobić.
Nie za bardzo rozumiem, w czym jest problem. Dla TR też możesz dodać ID, więc możesz potem to ID wykorzystać do identyfikacji elementu do usunięcia - https://stackoverflow.com/questions/29256197/is-it-valid-to-assign-id-to-tr-or-td-in-table
Możesz też zapisać sobie referencję w JS do elementu, np. tak:
const foo = $("<div>") // tak sie tworzyło elementy w jQuery?
// ...........
$(foo).remove(); // powinno zadziałać
<button onclick="dodaj_tr()">
Przypisywanie w ten sposób handlerów w HTML to słaby pomysł. O wiele wygodniej jest zrobić addEventListener albo ew. użyć jQuery (click, on itp.).
a poza tym trochę kontekstu by się przydało, jak wygląda reszta kodu?
@pol90 - wrzuć na http://jsfiddle.net konkretny kod, bo na razie za wiele niedopowiedzeń i domysłów. Na 99% da się osiągnąć to, o co Ci chodzi. ale musimy mieć więcej informacji/materiałów, nad którymi mamy popracować.
Chodzi o to, żeby to jest w pętli
@foreach ($drugs as $drugs2)
<tr class="drugs" id="drug_{{$i}}">
<td >
<input type="text" name="drugs1[]" value="{{$drugs2->name}}" class="form-control">
</td>
<td>
<input type="text" name="drugs2[]" value="{{$drugs2->field1}}" class="form-control">
</td>
<td>
<input type="text" name="drugs3[]" value="{{$drugs2->field2}}" class="form-control">
</td>
<td>
<input type="text" name="drugs4[]" value="{{$drugs2->field3}}" class="form-control">
</td>
<td>
<input type="text" name="drugs5[]" value="{{$drugs2->field4}}" class="form-control">
</td>
<td>
<input type="text" name="drugs6[]" value="{{$drugs2->field5}}" class="form-control">
</td>
<td>
<input type="text" name="drugs7[]" value="{{$drugs2->field6}}" class="form-control">
</td>
<td>
<button onclick="delete_drugs(drug_{{$i}})" class="btn btn-primary">Usuń wpis</button>
</td>
</tr>
@php
$i++;
@endphp
@endofreach
I tutaj na tym poziomie jest dobrze i przcisk usuń wpis służy do usuwania tych tr , ale jak chcę dodać nowy tr to używam tego
var i;
var bool = true;
function delete_drugs(i) {
//var f = $("<tr>");
$("#drug_" + i).remove();
//if(nazwa=document.getElementById(nazwa))nazwa.parentNode.removeChild(nazwa)
}
function add_drugs() {
//if (bool == true) {
// $(".drug").append("<tr class=\"drugs\" ><td width=\"30%\"><input type=\"text\" name=drugs1[" + i + "] class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs2["+ i + "]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs3["+ i + "]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs4["+ i + "]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs5["+ i + "]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs6["+ i + "]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs7["+ i + "]\" class=\"form-control\"></tr>");
//}
//else {
i++;
$(".drug").append("<tr class=\"drugs\" id=\"drug_ ><td width=\"30%\"><input type=\"text\" name=drugs1[] class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs2[]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs3[]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs4[]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs5[]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs6[]\" class=\"form-control\"></td><td width=\"10%\"><input type=\"text\" name=\"drugs7[]\" class=\"form-control\"><td><button onclick=\"delete_drugs(drug_+ i)\" class=\"btn btn-primary\">Usuń wpis</button></td></tr>");
//$bool = false;onclick="delete_drugs('f')" id = 'f'
//}
}
I teraz jak to zrobić żeby po wywołaniu funkcji add_drugs() mogło się tym przyciskiem usunąć ten aktualny element tr w tej linii
Weź wywal ten kod html z jsa. Możesz dodać go normalnie w htmlu i dodać mu id. np. "example-to-clone" i w stylach dodasz mu display na none. I będziesz sobie to klonował za każdym razem (zmieniając mu tylko atrybuty przed dodaniem do DOM).
Tu masz małą podpowiedź, stwórz na tej podstawie usuwanie, indeksy się tylko przydadzą w name pola. Wewnątrz funkcji dostaniesz wskaźnik this na kliknięty button. A mając wskaźnik możesz już sobie pobrać cały potrzebny kontener (np. używając funkcji parents()). I w ogóle to nie używaj onClick jako inline w tagu.
<button value="1" class="btn-delete">Click 1</button>
<button value="2" class="btn-delete">Click 2</button>
<script type="text/javascript">
$(function() {
$(document).on('click', '.btn-delete', function() {
alert($(this).val());
})
});
</script>
Dżizas xD Bo .btn-delete to jest klasa dla przycisku, który ma wyzwalać akcję usuwania. I żaden inny element nie powinien mieć tej klasy^^.
Zrób coś w stylu:
<tr class="item-container">
//tu pozostały kod, razem z przyciskiem
</tr>
<script type="text/javascript">
$(function() {
$(document).on('click', '.btn-delete', function() {
$(this).parents('.item-container').remove();
})
});
</script>