Link list sidebar widget remove button not working in jquery
At line 23 you are only selecting a parent HTML element when the remove-title button is clicked, but doing nothing with it.


if ($(".remove-title").length) {
  $("body").on("click", ".remove-title", function() {
    console.log("clicked");
    $(this).parents(".btn-options");
  });
}



First you should make sure you're not deleting the only section left. If so, the .add-title button is triggered first.


if ($(".remove-title").length) {
  $("body").on("click", ".remove-title", function() {
    console.log("clicked");
    var $this = $(this);
    var parent = $this.parents(".title-area");
    if (!parent.siblings(".title-area").length) {
      $this.siblings(".add-title").trigger("click");
    }
    var title = parent.find("input.title-text").eq(0).val();
    var toast = parent.siblings(".title-area").find(".btn-toast");
    toast.show().html("Title removed: <span>" + title + "</span>")
      .delay(400).fadeOut("slow");
    parent.remove();
  });
}



As you can see, I've also added a "toast" element to the btn-options div to briefly display the title of the deleted section. You can find the rest of those changes here: Codepen

I am creating a link list widget. Whenever we clicked on Title button, it adds a list with add link option. Everything is working fine but whenever I am trying to click the remove title button. The button is not working anymore. Where the alert is working and logs are showing also in console but the action is not working. Can you please check?
Code Pen Codepen Reference Link
