javascript - 如果节点包含具有特定名称的子节点但出现错误，则尝试从 XML 中删除该节点

Question

我正在构建一个小型网站来协助修改 Space Engineers Sandbox.sbc 文件，以便更轻松地插入和删除 mod id。

我目前可以插入 ID，但在删除 mod xml 元素时遇到问题。

这是示例代码(插入按钮在我这边有效，但我不确定如何正确导入外部 javascript 格式化插件文件)。

$(document).ready(function() {
  $("#insertmod").click(function() {
    var modID = $("#modID").val(),
      xmlDoc = $.parseXML($("#xmlTree").val()),
      $xml = $(xmlDoc),
      $mods = $xml.find("Mods");

    moditem = "<ModItem><Name>" + modID + ".sbm</Name><PublishedFileId>" + modID + "</PublishedFileId></ModItem>";
    $mods.append(moditem);

    prettyXML = $.format(new XMLSerializer().serializeToString($xml[0]), {
      method: 'xml'
    });
    $("#xmlTree").val(prettyXML);
  });

  $("#removemod").click(function() {
    var modID = $("#modID").val(),
      xmlDoc = $.parseXML($("#xmlTree").val()),
      $xml = $(xmlDoc),
      $mods = $xml.find("Mods");

    $removalNode = $mods.filter("ModItem PublishedFileId:contains(" + modID + ")");
    $mods.remove($removalNode);

    prettyXML = $.format(new XMLSerializer().serializeToString($xml[0]), {
      method: 'xml'
    });
    $("#xmlTree").val(prettyXML);
  });
});

<script src="https://github.com/zachofalltrades/jquery.format/blob/master/jquery.format.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="modID">Mod ID
  <input type="text" name="modID" id="modID">
</label>
<br>
<label for="xmlTree">Current Sandbox.sbc XML
  <br>
  <textarea name="xmlTree" id="xmlTree" cols="30" rows="10">
    <Mods>
      <ModItem>
        <Name>302257706.sbm</Name>
        <PublishedFileId>302257706</PublishedFileId>
      </ModItem>
      <ModItem>
        <Name>303127240.sbm</Name>
        <PublishedFileId>303127240</PublishedFileId>
      </ModItem>
      <ModItem>
        <Name>301534203.sbm</Name>
        <PublishedFileId>301534203</PublishedFileId>
      </ModItem>
      <ModItem>
        <Name>300709199.sbm</Name>
        <PublishedFileId>300709199</PublishedFileId>
      </ModItem>
    </Mods>
  </textarea>
</label>
<br>
<button id="insertmod">Insert Mod</button>
<button id="removemod">Remove Mod</button>
<div id="debug"></div>

当我运行我的代码以删除 xml 元素时出现错误

Uncaught TypeError: b.replace is not a function      jquery.min.js:2

所以我什至不确定这里发生了什么，因为显然在我的代码中某处我破坏了 jquery。

我的意图是:找到 mods 元素。接下来过滤它以获取包含子元素的 modItem 元素，该子元素包含与他们提供的用户的 mod ID 匹配的文本。然后删除该元素并将生成的格式化 xml(现在没有删除调制项)显示到文本区域。

Answer 1

您需要 find() 而不是 filter() 来删除 XML 节点。同样，您不能只执行 ModItem PublishedFileId 来获取具有 PublishedFileId 作为子节点的 ModItem。为此使用 :has(...) 。最后，$xml.remove(node) 应该是 $xml.find('somePath').remove();

$(document).ready(function() {
  $("#insertmod").click(function() {
    var modID = $("#modID").val(),
      xmlDoc = $.parseXML($("#xmlTree").val()),
      $xml = $(xmlDoc),
      $mods = $xml.find("Mods");

    moditem = "<ModItem><Name>" + modID + ".sbm</Name><PublishedFileId>" + modID + "</PublishedFileId></ModItem>";
    $mods.append(moditem);

    prettyXML = $.format(new XMLSerializer().serializeToString($xml[0]), {
      method: 'xml'
    });
    $("#xmlTree").val(prettyXML);
  });

  $("#removemod").click(function() {
    var modID = $("#modID").val(),
      xmlDoc = $.parseXML($("#xmlTree").val()),
      $xml = $(xmlDoc),
      $mods = $xml.find("Mods");

    $mods.find("ModItem:has(PublishedFileId:contains('" + modID + "'))").remove();
    prettyXML = $.format(new XMLSerializer().serializeToString($xml[0]), {
      method: 'xml'
    });
    $("#xmlTree").val(prettyXML);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://zachofalltrades.github.io/jquery.format/jquery.format.js"></script>
<label for="modID">Mod ID
  <input type="text" name="modID" id="modID">
</label>
<br>
<label for="xmlTree">Current Sandbox.sbc XML
  <br>
  <textarea name="xmlTree" id="xmlTree" rows="20" style="width:100%">
  <Mods>
    <ModItem>
        <Name>302257706.sbm</Name>
        <PublishedFileId>302257706</PublishedFileId>
    </ModItem>
    <ModItem>
        <Name>303127240.sbm</Name>
        <PublishedFileId>303127240</PublishedFileId>
    </ModItem>
    <ModItem>
        <Name>301534203.sbm</Name>
        <PublishedFileId>301534203</PublishedFileId>
    </ModItem>
    <ModItem>
        <Name>300709199.sbm</Name>
        <PublishedFileId>300709199</PublishedFileId>
    </ModItem>
</Mods>
  </textarea>
</label>
<br>
<button id="insertmod">Insert Mod</button>
<button id="removemod">Remove Mod</button>
<div id="debug"></div>