how to delete table design from word document page using javascript ? Word js Add-in

Question

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.

Suresh Chikkam · Accepted Answer · 2023-09-26 03:20:07Z

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);
    }
}

M Junaid · Accepted Answer · 2023-09-28 07:33:08Z

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.

Collectives™ on Stack Overflow

how to delete table design from word document page using javascript ? Word js Add-in

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related