用數據添加新的div並在點擊時將它們刪除

我想在單擊加號時添加新的div，並在單擊十字符號時將其刪除。這是一個示例圖像的link。在加號上，我想添加新的行像交叉符號（在行中包括顏色，大小和數量像1和交叉標誌刪除）。這是我的HTML。用數據添加新的div並在點擊時將它們刪除

<div class="row select_cart"> 
    <div class="col-md-12"> 
     <div class="col-sm-4"> 
      <div class="new_select"> 
       <select class="form-control" id="attribute137" name="super_attr[137]"> 
        <option>COLOR</option> 
        <option>Lime Black</option> 
        <option>Orange Black</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="new_select"> 
       <select class="form-control"> 
        <option>7</option> 
        <option>8</option> 
        <option>9</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-sm-3 col-xs-10"> 
      <div class="new_select "> 
       <select class="form-control"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-sm-1 col-xs-2"> 
      <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a> 
     </div> 
    </div> 
</div>

我可以用克隆這樣($("div[id^='myrows']").after($('#myrows').clone());)或複製代碼，反覆使用相同的HTML，但問題是如何安裝特定的叉號，每行和刪除that.I的點擊我的代碼更改點點。

HTML : 

<div class="row2"> 

       </div> 
JS: 

    $(".add").click(function(){ 
      var fld = ' <div class="row select_cart2"> <div class="col-md-12"> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>COLOR</option> <option>Lime Black</option> <option>Orange Black</option> </select> </div> </div> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>7</option> <option>8</option> <option>9</option> </select> </div> </div> <div class="col-sm-3 col-xs-10"> <div class="new_select "> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-sm-1 col-xs-2"> <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt=""> </a> </div> </div> </div>'; 

jQuery('.row2').append(fld); 

}); 
    $(".delete").on("click", ".button.delete", function(e){ 
    $(this).closest(".row.select_cart2").remove(); 
    e.preventDefault(); 
});

來源

2015-05-29 Mahmood Rehman

假設你有一個div這些元素，如：

<div id="container"> 
… 
</div>

然後，您可以使用單一的事件處理程序來實現這樣所有的缺失：

$("div#container").on("click", ".button.delete", function(e){ 
    $(this).closest(".row.select_cart").remove(); 
    e.preventDefault(); 
});

來源

2015-05-29 10:57:27 bitifet

大代碼worked.Thanks –

像這樣的事情

$('.delete').click(function(){ 
 
    $(this).parent().parent().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row select_cart"> 
 
    <div class="col-md-12"> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control" id="attribute137" name="super_attr[137]"> 
 
        <option>COLOR</option> 
 
        <option>Lime Black</option> 
 
        <option>Orange Black</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control"> 
 
        <option>7</option> 
 
        <option>8</option> 
 
        <option>9</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3 col-xs-10"> 
 
      <div class="new_select "> 
 
       <select class="form-control"> 
 
        <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-1 col-xs-2"> 
 
      <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row select_cart"> 
 
    <div class="col-md-12"> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control" id="attribute137" name="super_attr[137]"> 
 
        <option>COLOR</option> 
 
        <option>Lime Black</option> 
 
        <option>Orange Black</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control"> 
 
        <option>7</option> 
 
        <option>8</option> 
 
        <option>9</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3 col-xs-10"> 
 
      <div class="new_select "> 
 
       <select class="form-control"> 
 
        <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-1 col-xs-2"> 
 
      <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row select_cart"> 
 
    <div class="col-md-12"> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control" id="attribute137" name="super_attr[137]"> 
 
        <option>COLOR</option> 
 
        <option>Lime Black</option> 
 
        <option>Orange Black</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control"> 
 
        <option>7</option> 
 
        <option>8</option> 
 
        <option>9</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3 col-xs-10"> 
 
      <div class="new_select "> 
 
       <select class="form-control"> 
 
        <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-1 col-xs-2"> 
 
      <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row select_cart"> 
 
    <div class="col-md-12"> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control" id="attribute137" name="super_attr[137]"> 
 
        <option>COLOR</option> 
 
        <option>Lime Black</option> 
 
        <option>Orange Black</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="new_select"> 
 
       <select class="form-control"> 
 
        <option>7</option> 
 
        <option>8</option> 
 
        <option>9</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3 col-xs-10"> 
 
      <div class="new_select "> 
 
       <select class="form-control"> 
 
        <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-1 col-xs-2"> 
 
      <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-05-29 10:55:32 Prachit

當您將和事件監聽到「交叉」，您將能夠識別到的交叉屬於通過使用行 -

$(".delete").click(function(e){ 
    var row = $(this).closest(".row"); 
    row.find("div").remove(); 
}

這應該做你的工作，如果我hav e正確理解您的問題。

來源

2015-05-29 10:57:26

可以使用parent()方法，該方法返回所選元素的直接父元素。

$('.delete').unbind().bind('click', function(){ 
     $button = $(this); 
     $button.parent().parent().remove(); 
    });

我還創建了一個DEMO

編輯

更新fiddle

來源

2015-05-29 11:04:23 R4nc1d

感謝，但我無法測試您的演示是不是compelte。我嘗試這個代碼，但沒有運氣，你可以看到最新錯誤。它只能刪除第一個項目，並停止刪除其他項目。'$（「。add」）。c舔（函數（）{$ {$} = $（'。select_cart'）。clone（）; $（'。select_cart'）。（$ button）; }）; $（'。delete'）。unbind（）。bind（'click'，function（）{ $ button = $（this）; $ button.parent（）。parent（）。remove（）; } ）;' –

奇怪的是它適合我，我只是更新了小提琴。 – R4nc1d

也許我不是很瞭解你，何時必須添加。我只是快速瀏覽了他們還沒有添加的其他答案。 – R4nc1d

用數據添加新的div並在點擊時將它們刪除

回答

相關問題