刪除特定的附加元素與jQuery

我是很新，JQuery的，你可以通過我的問題告訴...刪除特定的附加元素與jQuery

用戶可以添加很多新的輸入字段的形式。這很好，但他們如何刪除一個特定的領域？如果他們追加5個輸入字段，他們如何刪除可以說第三個字段？

以下是我的以下代碼。目前什麼是總是刪除單擊時的第一個項目。

 $("#addNewItem").click(function(){ 
      $("#invoice_items").append('<input type="text" name="name[]" value="name" id="item_name" class="item_name" /><a href="#" id="delete_input"><img src="images/delete.png" /></a>'); 
     }); 

     $("#delete_input").live("click", function(){ 
      $("#item_name").remove(); 
      $(this).remove(); 
     });

來源

2012-04-01 steeped

您使用的是'id'選擇。文檔中的'id' ***必須是唯一的。任何基於id的選擇器將總是隻作用於第一個匹配的元素（因爲JavaScript需要有效的HTML，因此除了第一個元素外不會查找其他元素）。如果您選擇多個元素，請使用類名稱。 – 2012-04-01 22:12:04

現場已棄用。你不需要刪除ID，但它可能會幫助一個職位。不要複製ID。看下面我的小提琴。 – AutoSponge 2012-04-01 23:48:53

如何使用額外的容器輸入？

http://jsfiddle.net/dFpMV/

$("#addNewItem").click(function(){ 
    $("#invoice_items").append('<div class="input-container"><input type="text" name="name[]" value="name" id="item_name" class="item_name" /><a href="#" id="delete_input">X<img src="images/delete.png" /></a></div>'); 
}); 

$("#delete_input").live("click", function(){ 
    $(this).parent().remove(); 
});

來源

2012-04-01 22:21:08 ogur

首先，計算您添加的輸入數並將其存儲在變量中。

然後，當您添加元素時，根據該數字創建一個唯一標識符。

$("#invoice_items").append('<input type="text" name="name[]" value="name" id="item'+count'" class="item_name" /><a href="#" id="delete_input"><img src="images/delete.png" /></a>');

我會避免使用特定的項目名稱，在這種情況下，ID，使用一些通用的類似item0，物品1等

隨後，爲了除去

$("#item" + desiredNumber).remove(); 
    $(this).remove();

來源

2012-04-01 22:13:49 FlavorScape

鑑於標記你追加它應該只是$(this).prev().remove();並忽略這些ID。

來源

2012-04-01 22:15:03

所有鏈接都需要唯一的ID。允許以指定的id追加元素兩次是一個錯誤。你可以做的是在ID末尾添加一個人造數字，以使它們唯一。我會包裝輸入和鏈接到一個div，我會分配一個唯一的ID給它，分配一個類刪除鏈接，而不是id和刪除div像($this).parent().remove()

如果您使用jQuery 1.7+：還請注意，.live()已棄用，您應該使用.on()來代替（注意語法有點不同）。

來源

2012-04-01 22:15:56 mkk

如果他使用jQuery 1.7+，他應該只使用'on（）';如果他使用<1.7，他應該使用'委託（）'。 – 2012-04-01 22:20:58

沒錯。我將添加關於所需版本的說明。 – mkk 2012-04-01 22:21:41

我做了2個例子你並加入虛擬變量，所以你可以看到什麼happend：

1如果你知道如何DOM的樣子，你可以簡單地遍歷刪除鏈接和輸入之間的關係到前一個項目。

$("#delete_input").live("click", function(){ 
     $(this).prev().remove(); 
     $(this).remove(); 
    });

http://jsfiddle.net/JgKRw/行動

2例NR 1你給每個項目時將它們添加到DOM的唯一編號。

var dummyId = 0;  
     $("#addNewItem").click(function(){ 
      dummyId++; 
       $("#invoice_items").append('<input type="text" name="name[]" value="name ' + dummyId + '" id="item_name" class="item_name" data-id="' + dummyId + '" /><a data-id="' + dummyId + '" href="#" id="delete_input">' + dummyId + '<img   src="images/delete.png" /></a>'); 
    }); 

    $("#delete_input").live("click", function(){ 
     var deletedId = $(this).data("id"); // Get the ID of the clicked link 
     $("input[data-id='" + deletedId + "']").remove(); // Seach for an input which has the ID 
     $(this).remove(); 
    }); 

http://jsfiddle.net/JgKRw/1/ Example nr 2 in Action

我會實現2號，病程否則你，如果你想改變UI照顧腳本。

順便說一句，你應該只有一個元素分配給一個ID，所以改變你的ID和使用類保證。 http://api.jquery.com/class-selector/

來源

2012-04-01 22:16:02

這裏是我的小提琴： http://jsfiddle.net/JfUAa/

(function() { 
    var count = 0, 
     items = document.getElementById("input_items"), 
     $items = $(items), 
     tpl = '<div><input type="text" id="{{id}}" /><a href="#">delete</a></div>'; 
    function addItem(){ 
     $items.append(tpl.replace("{{id}}", count++)); 
    } 
    function remove(){ 
     items.removeChild(this.parentNode); 
    } 
    $("#addNewItem").click(addItem); 
    $items.on("click", "a", remove); 
}());

來源

2012-04-01 23:47:52 AutoSponge

刪除特定的附加元素與jQuery

回答

相關問題