Usuwanie diva, ale div jest dynamicznie tworzony

0

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ć.

0

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

0

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?

1

@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ć.

0

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

0

W metodzie .append() ustawiasz niepoprawne id danego tr.

2

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).

2

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>
1

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>

1 użytkowników online, w tym zalogowanych: 0, gości: 1