Sai Krishna Sai Krishna - 1 month ago 15
HTML Question

Removing the <br> along with the corresponding <span>

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.

This is how I've tried:

$("#AddBtn").click(function () {
if ($("#PickList_Options").val() == "") {
alert("Please enter an option");
} else {
if ($("#AddBtn").val() == "Add") {
var optionvalue = $("#PickList_Options").val();
$("#mydiv").append("&nbsp&nbsp<span id='span" + a + "' class='editbutton'>" + optionvalue + "&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='remove" + a + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='edit" + a + "' style='display: none; margin-right:10px;'></i></a></span><br/>");
a = a + 1;
$("#PickList_Options").val("");
} else if ($("#AddBtn").val() == "Update") {
$("#" + spanid).text($("#PickList_Options").val()).append("&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='" + removebuttonid + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='" + editbuttonid + "' style='display: none; margin-right:10px;'></i></a>");
$("#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);
});
}
});


Whenever I click the delete button, the
<span>
gets deleted leaving behind the
<br>
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.

So, my problem is, when the delete button is clicked, the
in that line also should get deleted. But, I can't figure out how to do it. Can someone help me with this?

Answer

Can you try below line of code for deletion of your <span> tag:

$('.remove').click(function(){
    removebuttonid = $(this).attr("id");
    alert(removebuttonid);
    var spanid = removebuttonid.replace('remove', 'span');
    alert(spanid);   

    $("#"+spanid).next("br").remove(); //remove immediate next br tag
    $("#"+spanid).remove(); //remove target span tag

}); 
Comments