skip to Main Content

I am inserting a table design in word document last page from table html. how can I delete it
this is my code

  async function NewMap() {
      try {
          await Word.run(async (context) => {  /*--html to word- https://stackoverflow.com/q/66576869  //-- word to html--- https://wordtohtml.net/   */
              var body = context.document.body;
              var paragraphs = body.paragraphs;
              context.load(paragraphs, 'length, last');
              await context.sync();

              const lastparagrsph = paragraphs.items[paragraphs.items.length - 1]
              // var selection = context.document.getSelection();
              var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
       <div style = 'margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;' >
       <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
        </div >
      <table style="width: 100%;border: none;border-collapse:collapse;">
      <tbody>
      <tr>
      <td style="width: 0.68%;padding: 0in 5.4pt;vertical-align: top;">
          <h5 style='margin:0in;font-size:15px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</h5>
      </td>
      <td style="width: 3.04%;padding: 0in 5.4pt;vertical-align: top;">
          <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p>
      </td>
      </tr>
     </tbody>
     </table>
     <p></p>
     <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
     <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
     </div>
     <p><br></p>`;

              // selection.insertHtml(htmlContent, 'End');
              lastparagrsph.insertHtml(htmlContent, 'End');

              await context.sync();
          });

      } catch (error) {
          console.log(error);
      }


  };

this method I am using for deleting

 async function DeleteMap() {
     try {
         await Word.run(async (context) => {
             var body = context.document.body;
             var paragraphs = body.paragraphs;
             context.load(paragraphs, 'length, last');
             await context.sync();

             const lastParagraph = paragraphs.items[paragraphs.items.length - 1];
             const range = lastParagraph.getRange();

             // Delete the range to remove the inserted HTML content
             range.delete();

             await context.sync();
         });
     } catch (error) {
         console.log(error);
     }
 }

this is deleting if any text is on then end but not deleting my inserted html I want to delete my inserted htmlContent.

2

Answers


  1. Chosen as BEST ANSWER

    using this my issue is solved

    async function NewMap() {
        try {
            await Word.run(async (context) => {
                const body = context.document.body;
    
                // Insert the custom structure within a content control with a specific tag
                const contentControl = body.insertContentControl();
                contentControl.tag = "customTableControl";
                contentControl.insertHtml(
                    `
                    <h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
                    <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
                        <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
                    </div>
                    <table style="width: 100%;border: none;border-collapse:collapse;">
                        <tbody>
                            <tr>
                                <td style="width: 0.68%;padding: 0in 5.4pt;vertical-align: top;">
                                    <h5 style='margin:0in;font-size:15px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</h5>
                                </td>
                                <td style="width: 3.04%;padding: 0in 5.4pt;vertical-align: top;">
                                    <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
                        <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
                    </div>
                   <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p> `,
                    Word.InsertLocation.replace
                );
    
                await context.sync();
            });
    
    
    }catch (error) {
        console.log(error);
    }
    
    };

    This is Delete Method

    async function DeleteMap() {
        try {
            await Word.run(async (context) => {
                const contentControlsWithTag = context.document.contentControls.getByTag('customTableControl');
    
                // Queue a command to load the content controls with the specified tag
                contentControlsWithTag.load('tag');
    
                // Synchronize the document state by executing the queued commands
                await context.sync();
    
                if (contentControlsWithTag.items.length === 0) {
                      console.log('No content control found.');
                } else {
                    // Delete the content control
                    contentControlsWithTag.items[0].delete();
    
                    // Synchronize the document state by executing the queued command
                    await context.sync();
                      console.log('Content control deleted.');
                }
            });
        } catch (error) {
            console.log(error);
        }
    }

    I am adding content Control on inserting html then deleting it.


  2. In your code, you have inserted multiple paragraphs with HTML content, including a table and other elements. To delete them, you should identify and delete each of these paragraphs.

    Use the delete method of the Range object to remove the inserted HTML content. Check this link.

    • Add a unique identifier (e.g., a specific HTML comment or a placeholder) around the HTML content you want to delete. Then, you can search for that identifier within the last paragraph and remove the content accordingly.
    var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
    <!-- StartMyCustomContent -->
    <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
       <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
    </div>
    <table style="width: 100%;border: none;border-collapse:collapse;">
       <!-- Some table content here -->
    </table>
    <p></p>
    <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
       <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
    </div>
    <p><br></p>
    <!-- EndMyCustomContent -->`;
    
    • Modify your DeleteMap function to search for and delete the content between the custom comment tags.
    async function DeleteMap() {
        try {
            await Word.run(async (context) => {
                var body = context.document.body;
                var paragraphs = body.paragraphs;
                context.load(paragraphs, 'length, last');
                await context.sync();
    
                const lastParagraph = paragraphs.items[paragraphs.items.length - 1];
    
                // Retrieve the HTML content as a string
                const paragraphHtml = lastParagraph.getHtml();
    
                // Find the custom comment tags
                const startTag = '<!-- StartMyCustomContent -->';
                const endTag = '<!-- EndMyCustomContent -->';
    
                // Check if the custom tags are present
                if (paragraphHtml.indexOf(startTag) !== -1 && paragraphHtml.indexOf(endTag) !== -1) {
                    // Remove the content between the custom tags
                    const startIndex = paragraphHtml.indexOf(startTag);
                    const endIndex = paragraphHtml.indexOf(endTag) + endTag.length;
                    const newHtmlContent = paragraphHtml.substring(0, startIndex) + paragraphHtml.substring(endIndex);
                    lastParagraph.insertHtml(newHtmlContent, Word.InsertLocation.replace);
                }
    
                await context.sync();
            });
        } catch (error) {
            console.log(error);
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search