У меня проблема с исчезновением полей формы "Dynami c"! (html + jquery) - PullRequest
Новая
       11

У меня проблема с исчезновением полей формы "Dynami c"! (html + jquery)

1 голос
/ 06 мая 2020

В настоящее время я работаю над формой в модальном окне.

Моя цель - реализовать динамические c поля, которые пользователь может добавлять и удалять.

* об этом также стоит упомянуть что значение этих "динамических c полей" позже будет экспортировано в

базу данных firebase!

Сейчас поля отображаются, но когда я выполняю функцию удаления / удаления, в недавно добавленном

поле все исчезает.

Это раздел html 

<div class="bg-modal">
        <div class="modal-contents">
    
            <div class="close li:hoover">+</div>
           
            <!-- validation todo -->
            <form class="input-modal" id="kundInfo">
                <br>    
                <input class="input-modal" type="text" placeholder="name" id="userName" required>

                <input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
                 
                <textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>

                <select class="input-modal" id="deliveryTown" value="">
                    <option value="default">Välj leveransort</option>
                    <option value="Stockholm">Stockholm</option>
                    <option value="Göteborg">Göteborg</option>
                    <option value="Kalmar">Kalmar</option>
                </select>
                <br>

                <div id="dynamic-items">
                <input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
                <input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
                <input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
                <!-- (original submit button)
                    <input type="submit" value="submit">
                -->
                </div>
                
                <br>
                <select class="input-modal" id="produktKategori" value="">
                    <option value="default">Välj inköpskategori</option>
                    <option value="trävaror">Trävaror</option>
                    <option value="mur&puts">Mur & puts</option>
                    <option value="mark&trädgård">Mark & trädgård</option>
                    <option value="vvs">VVS</option>
                    <option value="våtrum">Våtrum</option>
                    <option value="verktyg">Verktyg</option>
                </select>
                <br>
                <br>
                <button class="input-modal" id="Skicka" type="submit">Skicka</button>
            </form>

            <div class="alert">Ditt förfrågan är skickad!</div>
    
        </div>
    </div>

... и это файл jquery: 


$(document).ready(function(){

    
    $("#add").click(function (e){
        event.preventDefault()
        $('#dynamic-items').append(
            
        '<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">'+
        '<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">'+
        '<input type="button" name="delete[]" value="delete" id="delete"/></div>'
            
        );

    });


    $('body').on('click', '#delete',function (e){
        event.preventDefault()
        $(this).parent('div').remove();
    });
});

1 Ответ

0 голосов
/ 06 мая 2020

Строка html не имеет <div> в начале. 

$(document).ready(function() {


  $("#add").click(function(e) {
    event.preventDefault()
    $('#dynamic-items').append(

      '<div><input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">' +
      '<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">' +
      '<input type="button" name="delete[]" value="delete" id="delete"/></div>'

    );

  });


  $('body').on('click', '#delete', function(e) {
    event.preventDefault()
    $(this).parent('div').remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-modal">
  <div class="modal-contents">

    <div class="close li:hoover">+</div>

    <!-- validation todo -->
    <form class="input-modal" id="kundInfo">
      <br>
      <input class="input-modal" type="text" placeholder="name" id="userName" required>

      <input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>

      <textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>

      <select class="input-modal" id="deliveryTown" value="">
        <option value="default">Välj leveransort</option>
        <option value="Stockholm">Stockholm</option>
        <option value="Göteborg">Göteborg</option>
        <option value="Kalmar">Kalmar</option>
      </select>
      <br>

      <div id="dynamic-items">
        <input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
        <input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
        <input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
        <!-- (original submit button)
                    <input type="submit" value="submit">
                -->
      </div>

      <br>
      <select class="input-modal" id="produktKategori" value="">
        <option value="default">Välj inköpskategori</option>
        <option value="trävaror">Trävaror</option>
        <option value="mur&puts">Mur & puts</option>
        <option value="mark&trädgård">Mark & trädgård</option>
        <option value="vvs">VVS</option>
        <option value="våtrum">Våtrum</option>
        <option value="verktyg">Verktyg</option>
      </select>
      <br>
      <br>
      <button class="input-modal" id="Skicka" type="submit">Skicka</button>
    </form>

    <div class="alert">Ditt förfrågan är skickad!</div>

  </div>
</div>
...