title: Removing the <br> along with the corresponding <span>
body: <p>I'm experementing with dynamic forms. I've created a text box with an 'Add' button and a div. Whenever a user types some thing in that text box and clicks add button, that value falls into the div with a span tag created dynamically. I've also provided edit and delete options. When ever delete option is clicked, entire span must get deleted. This is my logic.</p>
  
  <p>This is how I've tried:</p>
  
  <pre><code>$("#AddBtn").click(function () {
      if ($("#PickList_Options").val() == "") {
          alert("Please enter an option");
      } else {
          if ($("#AddBtn").val() == "Add") {
              var optionvalue = $("#PickList_Options").val();
              $("#mydiv").append("&amp;nbsp&amp;nbsp&lt;span id='span" + a + "' class='editbutton'&gt;" + optionvalue + "&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;a href='javascript:void(0)' &gt;&lt;i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='remove" + a + "' style='display: none;'&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href='javascript:void(0)'&gt;&lt;i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='edit" + a + "' style='display: none; margin-right:10px;'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;&lt;br/&gt;");
              a = a + 1;
              $("#PickList_Options").val("");
          } else if ($("#AddBtn").val() == "Update") {
              $("#" + spanid).text($("#PickList_Options").val()).append("&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;a href='javascript:void(0)' &gt;&lt;i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='" + removebuttonid + "' style='display: none;'&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href='javascript:void(0)'&gt;&lt;i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='" + editbuttonid + "' style='display: none; margin-right:10px;'&gt;&lt;/i&gt;&lt;/a&gt;");
              $("#AddBtn").val("Add");
              $("#PickList_Options").val("");
          }
  
          $('.remove').click(function () {
              removebuttonid = $(this).attr("id");
              alert(removebuttonid);
              var spanid = removebuttonid.replace('remove', 'span');
              alert(spanid);
  
              $("#" + spanid).remove();
  
          });
  
          $(".edit").click(function () {
              addButtonValue = "Update"
              $("#AddBtn").val(addButtonValue);
              editbuttonid = $(this).attr("id");
              alert(editbuttonid);
              spanid = editbuttonid.replace('edit', 'span');
              alert(spanid);
              var value = ($("#" + spanid).text()).trim();
              $("#PickList_Options").val(value);
          });
      }
  });
  </code></pre>
  
  <p>Whenever I click the delete button, the <code>&lt;span&gt;</code> gets deleted leaving behind the <code>&lt;br&gt;</code> in the same line. I've provided a linebreak at the end of each span tag, so that when the user enters a new value in the text box, a span tag with that value falls in the next line. </p>
  
  <p>So, my problem is, when the delete button is clicked, the <br> in that line also should get deleted. But, I can't figure out how to do it. Can someone help me with this?</p>