使用 Javascript 创建 remove/destroy DOM 元素的正确方法

Question

解释：

我有一个 ASP.NET 应用程序，我可以在其中单击一个按钮来检索车辆信息。车辆详细信息随后显示在模态屏幕中，其中包含以下数据：ID、VEHICLENAME、YEAR 和 VEHICLE_DOCUMENTATION.

VEHICLE_DOCUMENTATION显示在使用JavaScript创建的锚标签中。期望是当我检索车辆详细信息时，将显示它们的相关 VEHICLE_DOCUMENTATION，并在锚标记中创建。如果检索到另一个车辆详细信息，它们的相关 VEHICLE_DOCUMENTATION 也将在锚标记中创建。

我遇到的问题是，当为车辆详细信息创建锚标记时，我无法在下次检索另一个车辆详细信息时创建锚标记。我已经在下面概述了我不断遇到的错误。

我在下面提供了完整的工作代码，包括我遇到的错误消息。希望有人能帮助我。

细节控制器：

DetailController:

[HttpPost]
public ActionResult GetDetail(int? id)
{
  return _context.Vehicle.Where(v => v.ID == id).Select(x => new VehicleModel(){
     ID = x.ID,
     VEHICLENAME = x.VEHICLENAME,
     YEAR = x.YEAR,
     VEHICLE_DOCUMENTATION = x.VEHICLE_DOCUMENTATION
  }).FirstOrDefault();
}

详细剃刀页面：

Button
------
<button type="button" data-toggle="modal" data-target="#detailModal" onclick="postData(id)"></button>

Modal window appears when button is clicked
-------------------------------------------
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalTitle">Vehicle Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ID: <label id="ID"></label><br />
                VEHICLE NAME: <label id="VEHICLENAME"></label><br />
                YEAR: <label id="YEAR"></label><br />
                VEHICLE DOCUMENTATION: <label id="VEHICLE_DOCUMENTATION"></label><br />
            </div>
        </div>
    </div>
</div>

AJAX POST to GetDetail method:
------------------------------
<script>
function postData(id) {
   response = '';
            $.ajax({
                async: true,
                type: "POST",
                url: "/Detail/GetDetail",
                data: { 'id': id},
                success: function (xhr) {
                    response = xhr;
                    $('#ID').text(response.data.ID);
                    $('#VEHICLENAME').text(response.data.VEHICLENAME);
                    $('#YEAR').text(response.data.YEAR);
                    $('#VEHICLE_DOCUMENTATION').text(response.data.VEHICLE_DOCUMENTATION);

                    //Create anchor tags
                    if (response.data.VEHICLE_DOCUMENTATION.length !== 0) {
                        for (const doc of response.data.VEHICLE_DOCUMENTATION) {
                            const anchor = document.createElement('a');
                            const list = document.getElementById('VEHICLE_DOCUMENTATION');
                            const li = document.createElement('ol');
                            anchor.href = 'www.vehicledocumentationexample.com';
                            anchor.innerText = `${doc}`;
                            
                            //THIS IS WHERE THE ERROR IS BEING FLAGGED:
                            li.appendChild(anchor);
                            list.appendChild(li);
                        }
                   //Delete/Remove elements
                    } else if (response.data.VEHICLE_DOCUMENTATION.length == 0) {
                        response.data.VEHICLE_DOCUMENTATION = [];
                        document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";
            
                       //WHAT I'VE TRIED:
                       //document.getElementById('VEHICLE_DOCUMENTATION').remove();
                       //document.getElementById('VEHICLE_DOCUMENTATION').outerHTML = "";
                    }
                },
                error: function (xhr) {
                    response = xhr;
                }
            })

}
</script>

浏览器错误信息：

Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.success (...)
    at fire (jquery.js:3240)
    at Object.fireWith [as resolveWith] (jquery.js:3370)
    at done (jquery.js:9061)
    at XMLHttpRequest.<anonymous> (jquery.js:9303)

Answer 1

当你输入：

 document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";

你所做的是擦除标签元素，所以当你调用它时

const list = document.getElementById('VEHICLE_DOCUMENTATION');

它将return null 因为该元素不再存在

不应该使用“outerHTML”，而应该使用“innerHTML”，这是它们之间的区别：

console.log(document.getElementById("VEHICLE_DOCUMENTATION").outerHTML);

console.log(document.getElementById("VEHICLE_DOCUMENTATION").innerHTML);

<label id="VEHICLE_DOCUMENTATION">
  <p>something</p>
</label>

使用 Javascript 创建 remove/destroy DOM 元素的正确方法

Correct way to create and remove/destroy DOM element using Javascript

html

javascript

asp.net-mvc

dom

createelement

解释：

细节控制器：

详细剃刀页面：

浏览器错误信息：