Удаление определенного тега div с помощью кнопки с помощью прослушивателя событий .onclick - PullRequest
Новая
       103

Удаление определенного тега div с помощью кнопки с помощью прослушивателя событий .onclick

1 голос
/ 18 октября 2019

Я новичок в кодировании в целом. У меня есть новые теги div, генерируемые с событием onclick, и это прекрасно работает. Я создал и добавил новую кнопку к каждому тегу div на тот случай, если пользователь захочет удалить этот тег div. Но моя проблема в том, что я не могу создать событие onclick для удаления этого конкретного div, нажав на кнопку.

Я не хочу удалять все мои теги div, только одинТег div, определяющий, где находится кнопка. 


// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#search").val();

console.log(itineraryInput);

var row = $("<div>");
    row.addClass("attraction");
    row.append("<p>" + itineraryInput + "</p>");
    // row.append("<button>" + "<button>" + "<button>");

var newButton1 = $("<button>" + "<p> Add to  leave a review </p>");
    newButton1.addClass("newButton");

    row.append(newButton1);

var newButton2 = $("<button>");
    newButton2.addClass("newButton");

    row.append(newButton2);

var newButton3 = $("<button>");
    newButton3.addClass("newButton");
    newButton3.attr("id", "deleteButton");

    row.append(newButton3);

    $("#first").prepend(row);
    // $("#first").append(attButton);
})

$("#deleteButton").on("click", function() {
    $(".div").remove();
});

Ничего не удаляется.

1 Ответ

1 голос
/ 19 октября 2019

Проблема в том, что вы пытаетесь добавить событие (ваше click) к кнопке, которой пока нет в вашем документе, потому что она динамическая.

Таким образом, ваше решение может быть найденоздесь => Привязка события к динамически создаваемым элементам?

Технически это дублирующий вопрос , но поскольку вы пишете код, который слишком сложен для того, что он имеетЧтобы сделать это, я пытаюсь указать вам гораздо более простой способ.

Вы добавляете много append & addClass, которые создают рекурсивный и грязный код. Решением, делающим его более сухим, может быть использование одной переменной со всеми вашими кнопками и добавление только этого. 

var row="";

row+="<div class='attraction'>";
row+="<p>" + itineraryInput + "</p>";
row+="<button class='newButton review'>Add to leave a review</button>";
row+="<button class='newButton doSomething'>Do something</button>";
row+="<button class='newButton deleteButton'>Remove itinerary</button>";
row+="</div>";

$("#first").prepend(row);

После этого вы можете использовать решение, которое я разместил перед вами, чтобы добавить событие для удалениякнопка: 

$(document).on("click", ".deleteButton", function() {
    $(this).closest(".attraction").remove();
});

Для добавления других событий к другим кнопкам используется та же техника.

Это ваш код в действии с работающими кнопками удаления: 

$("#search-submit").on("click", function() {

  var itineraryInput = $("#search").val();

  var row="";
  row+="<div class='attraction'>";
  row+="<p>" + itineraryInput + "</p>";
  row+="<button class='newButton review'>Add to  leave a review</button>";
  row+="<button class='newButton something'>Do something</button>";
  row+="<button class='newButton deleteButton'>Remove itinerary</button>";
  row+="</div>";

  $("#first").prepend(row);
})

$(document).on("click", ".deleteButton", function() {
    $(this).closest(".attraction").remove();
});
.newButton {
  width: 33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
   <div class="col">
      <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
      <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
   </div>
</div>
<div class="trans_container">
   <div id="trans_first"></div>
   <div id="trans_second"></div>
</div>
<div class="acontainer">
   <div id="first"></div>
   <div id="second"></div>
   <div id="clear"></div>
</div>

Редактировать 1 Я отвечаю на ваш комментарий.

Вы можете использовать appendTo для .. . добавлять контент куда угодно с помощью jQuery. Я публикую вам пример. В этом случае я беру свой маршрут и помещаю его в div #second, нажимая кнопку с именем « Append to # second ». (В вашем комментарии вы забыли точку (.) до something (потому что something - это класс, возможно, это была проблема): 

$(document).on("click", ".something", function() { 
                     /* ^^^ write a dot here */  
    $("div").appendTo("#second"); 
});


$("#search-submit").on("click", function() {

  var itineraryInput = $("#search").val();

  var row="";
  row+="<div class='attraction'>";
  row+="<p>" + itineraryInput + "</p>";
  row+="<button class='newButton review'>Add to  leave a review</button>";
  row+="<button class='newButton something'>Append to #second</button>";
  row+="<button class='newButton deleteButton'>Remove itinerary</button>";
  row+="<div class='green'></div>";
  row+="</div>";

  $("#first").prepend(row);
})

$(document).on("click", ".deleteButton", function() {
    $(this).closest(".attraction").remove();
});


$(document).on("click", ".something", function() { 
  var parent=$(this).closest(".attraction");

  $("p", parent).appendTo("#second"); 
});
.newButton {
  width: 33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mb-2">
   <div class="col">
      <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
      <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
   </div>
</div>
<div class="trans_container">
   <div id="trans_first"></div>
   <div id="trans_second"></div>
</div>
<div class="acontainer">
   <div id="first"></div>
   <div id="second"></div>
   <div id="clear"></div>
</div>
...