1

The mission is when I click on the plus button to add a new search input it has to add a new field with a plus button and removal button (it calls times-btn).

Everything works fine but when I click on the removal button the first one has created is removed only but when I click on any button else it doesn't work. so, How can I trigger the removal button that?

This screenshot explains the intended task.

search.html

    <!-- Search formsets -->
    <div class="search-field">
        <h2 class="show"></h2>
        <form method="get" id="main_search">
            <div id="first_search_group" class="form-group row search_repeated search_group">
                <div class="col-lg-2 d-inline p-2 word_repeated">
                    <label style="font-size: large; padding-top: 5px">Sentence or Word</label>
                </div>
                <!-- Filter -->
                <div class="col-lg-2 d-inline p-2">
                    <select name="formsets_option" id="formsets_option" class="form-control">
                        {% if formsets_option == 'contains' %}
                        <option id="contains" value="contains" selected>contains</option>
                        {% else %}
                        <option id="contains" value="contains">contains</option>
                        {% endif %}

                        {% if formsets_option == 'start_with' %}
                        <option id="start_with" value="start_with" selected>start with</option>
                        {% else %}
                        <option id="start_with" value="start_with">start with</option>
                        {% endif %}

                        {% if formsets_option == 'is' %}
                        <option id="is" value="is" selected>is</option>
                        {% else %}
                        <option id="is" value="is">is</option>
                        {% endif %}

                        {% if formsets_option == 'end_with' %}
                        <option id="end_with" value="end_with" selected>end with</option>
                        {% else %}
                        <option id="end_with" value="end_with">end with</option>
                        {% endif %}
                    </select>
                </div>
                <div class="col-lg-4 d-inline p-2">
                    <input id="search_btn" type="text" class="form-control"
                           onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}"
                           placeholder="search" name="query" value="{{ request.GET.query }}">
                </div>
                <div class="col-lg-2 d-inline p-2">
                    <select name="verb_option" id="verb_option" class="form-control">
                        {% if verb_option == '' %}
                        <option value="" selected>Any POS</option>
                        {% else %}
                        <option value="">Any POS</option>
                        {% endif %}

                        {% if verb_option == 'Adj' %}
                        <option value="Adj" selected>Adjective</option>
                        {% else %}
                        <option value="Adj">Adjective</option>
                        {% endif %}

                        {% if verb_option == 'Adv' %}
                        <option value="Adv" selected>Adverb</option>
                        {% else %}
                        <option value="Adv">Adverb</option>
                        {% endif %}

                        {% if verb_option == 'Asp' %}
                        <option value="Asp" selected>Aspect Marker</option>
                        {% else %}
                        <option value="Asp">Aspect Marker</option>
                        {% endif %}

                        {% if verb_option == 'Cl' %}
                        <option value="Cl" selected>Classifier</option>
                        {% else %}
                        <option value="Cl">Classifier</option>
                        {% endif %}

                        {% if verb_option == 'Conj' %}
                        <option value="Conj" selected>Conjunction</option>
                        {% else %}
                        <option value="Conj">Conjunction</option>
                        {% endif %}

                        {% if verb_option == 'Det' %}
                        <option value="Det" selected>Determiner</option>
                        {% else %}
                        <option value="Det">Determiner</option>
                        {% endif %}

                        {% if verb_option == 'Idiom' %}
                        <option value="Idiom" selected>Idiom</option>
                        {% else %}
                        <option value="Idiom">Idiom</option>
                        {% endif %}

                        {% if verb_option == 'Intj' %}
                        <option value="Intj" selected>Interjection</option>
                        {% else %}
                        <option value="Intj">Interjection</option>
                        {% endif %}

                        {% if verb_option == 'Noun' %}
                        <option value="Noun" selected>Noun</option>
                        {% else %}
                        <option value="Noun">Noun</option>
                        {% endif %}

                        {% if verb_option == 'Num' %}
                        <option value="Num" selected>Number</option>
                        {% else %}
                        <option value="Num">Number</option>
                        {% endif %}

                        {% if verb_option == 'Ono' %}
                        <option value="Ono" selected>Onomatopoeia</option>
                        {% else %}
                        <option value="Ono">Onomatopoeia</option>
                        {% endif %}

                        {% if verb_option == 'Part' %}
                        <option value="Part" selected>Particle</option>
                        {% else %}
                        <option value="Part">Particle</option>
                        {% endif %}

                        {% if verb_option == 'Prep' %}
                        <option value="Prep" selected>Preposition</option>
                        {% else %}
                        <option value="Prep">Preposition</option>
                        {% endif %}

                        {% if verb_option == 'Pro' %}
                        <option value="Pro" selected>Pronoun</option>
                        {% else %}
                        <option value="Pro">Pronoun</option>
                        {% endif %}

                        {% if verb_option == 'Pu' %}
                        <option value="Pu" selected>Punctuation</option>
                        {% else %}
                        <option value="Pu">Punctuation</option>
                        {% endif %}

                        {% if verb_option == 'SFP' %}
                        <option value="SFP" selected>Sentence-Final Particle</option>
                        {% else %}
                        <option value="SFP">Sentence-Final Particle</option>
                        {% endif %}

                        {% if verb_option == 'Verb' %}
                        <option value="Verb" selected>Verb</option>
                        {% else %}
                        <option value="Verb">Verb</option>
                        {% endif %}

                        {% if verb_option == 'X' %}
                        <option value="X" selected>Unclassified</option>
                        {% else %}
                        <option value="X">Unclassified</option>
                        {% endif %}
                    </select>
                </div>
                <div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
                    <div class="fa fa-plus d-inline"></div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-12">
                    <input type="submit" name="main_search" value="Search" class="btn btn-primary">
                    <a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
                </div>
            </div>
        </form>
    </div>

search.html

<script type="text/javascript">
    $(document).ready(function()
    {
        let btn_plus = $(".btn-plus");
        let search_group = $(".search_group")
        let search_form = $("#main_search")

        let create_times_parent = document.createElement("div")
            create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")
        let create_times = document.createElement("div")
            create_times.classList.add("fa", "fa-times", "d-inline")
        create_times_parent.appendChild(create_times)

        function add_inc()
        {
            btn_plus.click(function ()
            {
                $("div.search_group:first-of-type").after(search_group.clone(true, true));
                search_group.addClass('created')
                search_group.append(create_times_parent)

                if ($(this).data('clicked', true)) {
                    create_times_parent.onclick = function ()
                    {
                        $(this).parent('.created').remove()
                        console.log("clicked")
                    }
                }
            });

        }
        add_inc()
    });
    </script>
Avishka Dambawinna
  • 1,180
  • 1
  • 13
  • 29
Medo Abdin
  • 185
  • 2
  • 13

1 Answers1

1

Your divs are dynamically generated so just bind it with static elements which are already present inside your DOM.

Also , I have move whole remove event outside function and then have use $(document).on("click", ".remove", function() {.. this will trigger your remove button then use .closest(".created").remove() to remove whole div.

Demo Code :

$(document).ready(function() {
  let search_group = $(".search_group")
  let search_form = $("#main_search")

  let create_times_parent = document.createElement("div")
  create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")

  let create_times = document.createElement("div")
  //added on extra class here..
  create_times.classList.add("fa", "fa-times", "d-inline", "remove")
  create_times_parent.appendChild(create_times)

  $(document).on('click', '.btn-plus', function() {
    $("div.search_group:first-of-type").after(search_group.clone(true, true));
    search_group.addClass('created')
    search_group.append(create_times_parent)

  });

  //onclick of remove..
  $(document).on("click", ".remove", function() {
    $(this).closest('.created').remove() //get closest outer div
    console.log("clicked")
  })

})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-field">
  <h2 class="show"></h2>
  <form method="get" id="main_search">
    <div id="first_search_group" class="form-group row search_repeated search_group">
      <div class="col-lg-2 d-inline p-2 word_repeated">
        <label style="font-size: large; padding-top: 5px">Sentence or Word</label>
      </div>
      <!-- Filter -->
      <div class="col-lg-2 d-inline p-2">
        <select name="formsets_option" id="formsets_option" class="form-control">

          <option id="contains" value="contains" selected>contains</option>

          <option id="start_with" value="start_with" selected>start with</option>

          <option id="is" value="is" selected>is</option>

          <option id="end_with" value="end_with" selected>end with</option>

        </select>
      </div>
      <div class="col-lg-4 d-inline p-2">
        <input id="search_btn" type="text" class="form-control" onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}" placeholder="search" name="query" value="{{ request.GET.query }}">
      </div>
      <div class="col-lg-2 d-inline p-2">
        <select name="verb_option" id="verb_option" class="form-control">

          <option value="" selected>Any POS</option>

        </select>
      </div>
      <div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
        <div class="fa fa-plus d-inline"></div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-md-12">
        <input type="submit" name="main_search" value="Search" class="btn btn-primary">
        <a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
      </div>
    </div>
  </form>
</div>
Avishka Dambawinna
  • 1,180
  • 1
  • 13
  • 29
Swati
  • 28,069
  • 4
  • 21
  • 41
  • Thanks, a lot @Swati it works fine but now it affects negatively on a plus button where one button (the main one only) that works and the rest buttons not work – Medo Abdin Mar 21 '21 at 13:30
  • you need `+` button should work for dynamically generated divs ? – Swati Mar 21 '21 at 13:32
  • yes, so I created a clone(true, true) I thought it does that – Medo Abdin Mar 21 '21 at 13:34
  • Yes, It works now but could you please explain to me the difference between a click on a div and a click on a document itself? why the div itself doesn't work I think it was the same as long I click on a document and the event will affect on div at the end – Medo Abdin Mar 21 '21 at 13:43
  • 1
    Here , i have use document but you can use any divs or body tag which is already present inside your `DOM` i.e : static elements which doesn't gets change . This , is because you are working with dynamically generated elements which is not present in your `DOM` but added later so you can bind these dynamically generated elements with static elements to make them works . Here , [this](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) post which will help you to understand better. – Swati Mar 21 '21 at 13:47