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;'> </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;'> </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;'> </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;'> </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.
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;'> </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;'> </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;'> </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;'> </p>
</div>
<p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'> </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.