Remove div tag with specific id and retain content

Question

I have a requirement of removing a specific div tag with a unique id from the string and retain content. I want to strip out the div with a id="anchorWrap" as shown belove.


        
            
                Chief Complaint  
                This is a 37 y.o. WM who presents with  
                dysphagia of solid foods for three years

The expected result is


        
            
                Chief Complaint  
                This is a 37 y.o. WM who presents with  
                dysphagia of solid foods for three years

I tried this regex

let anchorString = anchorText.replace(/\s*(.*?)\s*<\/div>/gi, "");

But was not able to remove that div. Please help me to achieve this.

Thanks in advance.

user_7461381 · Answer

You can try the following way:

var el = document.getElementById('anchorWrap'); // get the element
var pe = el.parentNode; // get parent
while(el.firstChild) pe.insertBefore(el.firstChild, el); // insert content

pe.removeChild(el); // remove el


  
      
          Chief Complaint  
          This is a 37 y.o. WM who presents with  
          dysphagia of solid foods for three years

Update: using DOMParser() for htmlString

var elStr = `
  
      
          Chief Complaint  
          This is a 37 y.o. WM who presents with  
          dysphagia of solid foods for three years  
      
  
`;

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(elStr, 'text/html');

var el = htmlDoc.getElementById('anchorWrap'); // get the element
var pe = el.parentNode; // get parent
while(el.firstChild) pe.insertBefore(el.firstChild, el); // insert content

pe.removeChild(el); // remove el
elStr = htmlDoc.querySelector("body").innerHTML
console.log(elStr);

user_1471485 · Answer

Since the html is text, you could create a DOM-element, and set your string to be the innerHTML of that element.

Then, create a document fragment so that you can query the content which is inside the anchorWrap-element:

const anchorText = `
        
            
                Chief Complaint  
                This is a 37 y.o. WM who presents with  
                dysphagia of solid foods for three years  
            
        
    `; // html string

// create DOM element
var tmpEl = document.createElement('div');
// set the content of that element from our html text
tmpEl.innerHTML = anchorText;
// create document fragment
const fragmet = document.createDocumentFragment();
// add the created html-element into the fragment so we can run DOM-queries
fragmet.appendChild(tmpEl);
// query the element (now it is a HTMLElement, not a string)
const anchorWrapEl = fragmet.getElementById('anchorWrap');
// get all the content within the anchorWrap-element
const anchorWrapConent = anchorWrapEl.innerHTML;
console.log('here is our result', anchorWrapConent);

If you are able to run the code in a web browser, I think this should work. No need for complex regular expressions.

user_9888848 · Answer

First, you need to copy the content of the div with id="anchorWrap". Then you have to reach its immediate parent which is span. Then assign that copied value to span. The solution uses jquery.


  
    
  
  
    
      
        
          
            Chief Complaint  
          
          
            This is a 37 y.o. WM who presents with  
          
          
            dysphagia of solid foods for three years

Solution:

let divValue = $("#anchorWrap").text();
$("#anchorWrap").parent().get(0).innerHTML = divValue

user_12658831 · Answer

let anchorText = document.getElementById("anchorWrap").innerText;
document.querySelector(".stl_15").innerHTML = anchorText;

this should solve it

Remove div tag with specific id and retain content

4 Answers