CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
bnil
bnil

Reputation: 1541

How to remove entire div from MVC View?

I am developing MVC application.

I have a View in which I show the data row wise.

I have placed a remove link in that row, when user click on that link, that row should be remove.

But its not working...

I display the data in following format.

  $('#ProductList').append("<div  class='span12' style='margin-left:0px' ><div class='span2'>" +
                "<select class='clsProductId '  name='ProductId' id='ddProductList_" + IDD + "' style = 'font-size:12px;width:200px;margin-right:80px;margin-left:20px;' onchange='get(" + IDD + ")'/> </div>" +
                "<div id='ProductCode_" + IDD + "' class='span1'  style=' margin-left:85px;'></div>" +
                "<div id='Weight_" + IDD + "' class='span1' style=' margin-left:55px;'> </div>" +
                "<div class='span1'style='margin-left:0px;'><input type='text' id='Quantity_" + IDD + "' class='clsQuantity'  name='Quantities' style='width:50px; margin-left:0px;' onblur='StockLinkVisible(" + IDD + ");' /></div>" +
                 "<div class='span1' style='margin-left:0px;'><a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color :#ee8929; margin-left:20px;' id='lnkRemove_" + IDD + "' class='clsRemove'  onclick='removeElement(" + IDD + ");'>X</a></div>" +
                 "<div class='span1'style='margin-left:10px; Width:60px;'  id='Bandra_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:10px; Width:60px;'  id='Dadar_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:0px; Width:60px;'    id='Bhivandi_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:10px; Width:40px;'  id='Juhu_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:10px; Width:40px;'  id='Kurla_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:10px; Width:60px;'  id='Dombivali_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:15px; Width:40px;'  id='Worli_" + IDD + "'>123</div>" +
                "<div class='span1'style='margin-left:15px; Width:60px;'  id='Sant_" + IDD + "'>123</div>" +
                 "<div class='span1'style='margin-left:0px; Width:40px;'  id='Bandra_" + IDD + "'>123</div>" +


                "<hr></div>");

for removing the row I have written the below code...

   function removeElement(cnt)
    {

        $("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
            $(this).closest("div").remove(); 
        });
    }

Please check image below for better idea... enter image description here

Upvotes: 2

Views: 2298

Answers (3)

Murali Murugesan
Murali Murugesan

Reputation: 22619

You no need to call removeElement for each element. Just configure the below code in document.ready

$(document).ready(function(){
 $("#ProductList").on('click', '.clsRemove', function () {
        $(this).parents("div.span12:first").remove();
 });
});

Upvotes: 1

Jai
Jai

Reputation: 74738

update to this:

function removeElement(cnt)
{
   $('#lnkRemove_'+cnt).closest("div.span12").remove(); 
}

You don't need to bind click event again instead you can do as suggested or better to delegate the event to the closest static parent (try unobtrusive js):

$("#ProductList").on('click', '[id^="lnkRemove"]', function () {
    $(this).closest("div.span12").remove(); 
});

Upvotes: 0

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

On the click event, you call a function

onclick='removeElement(" + IDD + ");

This function binds another click handler to itself, but doesn't actually do anything. Furthermore, the click handler will look for the closest div, which only wraps the delete button, and so doesn't quite do what you want.

 $("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
     $(this).closest("div").remove(); 
 });

Here's my suggestion: remove the onclick event and the function, and on document ready, register a generic click action as follows:

$('#ProductList').on('click', '.clsRemove', function() { 
    $(this).closest('div.span12').remove();
});

I chose the class span12 as the selector simply because it's the only one I saw that the top-level wrapping div (the "row") had. Feel free to add a more descriptive selector and using that instead.

Upvotes: 2

Related Questions