單擊“X”后如何刪除從 foreach 循環生成的 div

Question

我正在使用 MVC，我有一個頁面，其中的信息是從 foreach 循環生成的，它顯示了模型的屬性。

 @foreach (var chassi in Model.Chassis)
                {
                    <div class="chassi">
                        @chassi
                        <img src="~/assets/icons/exclude.svg" alt="Remove chassis"/>
                    </div>
                }

我必須執行此“X”操作，以刪除此 div 並刪除此頁面正在接收的 model 中的信息。

Answer 1

您可以按照以下步驟實現此目的：

• 通過相同的循環將id分配給每個div元素。
• 將onclick處理程序添加到img元素。
• 單擊圖像圖標時，此處理程序將使您可以訪問該event 。
• 通過調用event.target.parentNode訪問所需的div並使其display屬性none以隱藏它或調用remove()將其從 dom 中刪除。

希望這可以幫助。

Answer 2

可以嘗試這樣的事情（您可以將 onclick 中的 JS 與您的刪除圖像合並）：

 <div class="chassi"> Test <button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button> </div> <div class="chassi"> Test <button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button> </div>

Answer 3

只需刪除父級

<img onclick="remove(this.parentNode);" />

或者如果你有多個父母

<img onclick="remove(this.parentNode.parentNode);" />