CODEWITHSUNDEEP
javascriptjqueryxml
Samuel
Samuel

Reputation: 584

Trying to remove a node from XML if it contains a child with a specific name but getting error

I'm building a small website to assist with modding Space Engineers Sandbox.sbc files in order to make inserting and removing mod ids easier.

I currently have the inserting of IDs working, but I'm having trouble with removing the mod xml element.

Here is the example code (the insert button works on my end but I wasn't sure how to correctly import the external javascript formatting plugin file).

$(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>

When I run my code to remove the xml element I get an error

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

So I'm not even sure what's going on here because apparently somewhere in my code I broke jquery.

What my intention is: find the mods element. Next filter it to get at the modItem element that contains a child element which contains the text that matches the user's mod ID that they supplied. And then remove that element and display the resulting formatted xml, sans now removed moditem, to the textarea.

Upvotes: 1

Views: 541

Answers (1)

asontu
asontu

Reputation: 4659

You need find() not filter() to remove XML nodes. As well you can't just do ModItem PublishedFileId to get the ModItem that has a PublishedFileId as child-node. Use :has(...) for this. Lastly, $xml.remove(node) should be $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>

Upvotes: 2

Related Questions