Mi objetivo es, usando Jquery o Vanilla JS, borrar el texto interno solo de un div y cada uno de sus elementos secundarios, manteniendo todos los elementos intactos después del hecho. En el siguiente ejemplo, el div es student_profile .
Las respuestas en SO han recomendado las funciones .html('') y .text('') pero, como muestra mi ejemplo a continuación, esto elimina por completo el elemento secundario del DOM (mi ejemplo muestra solo una función, pero ambas eliminan el elemento ). ¿Hay alguna función que elimine todo el texto del div actual y los divs secundarios mientras mantiene intactos los elementos?
¡Cualquier consejo aquí sería apreciado!
function cleardiv() { console.log(document.getElementById("student_name")); $('#student_profile').html(''); console.log(document.getElementById("student_name")); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='student_profile'> <h1 id="student_name">Foo Bar</h1> <p id="student_id">123</p> <p id="studen_course">math</p> <p id="last_reported">2021-01-01</p> </div> <button onclick="cleardiv()">Clear</button>Una opción es seleccionar todos los descendientes de nodos de texto y .remove() , dejando intactos los elementos reales:
const getTextDecendants = (parent) => { const walker = document.createTreeWalker( parent, NodeFilter.SHOW_TEXT, null, false ); const nodes = []; let node; while (node = walker.nextNode()) { nodes.push(node); } return nodes; } function cleardiv() { for (const child of getTextDecendants($('#student_profile')[0])) { child.remove(); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='student_profile'> <h1 id="student_name">Foo Bar</h1> <p id="student_id">123</p> <p id="studen_course">math</p> <p id="last_reported">2021-01-01</p> </div> <button onclick="cleardiv()">Clear</button>Puedes probar el selector #student_profile * para incluir todos los elementos secundarios.
function cleardiv() { console.log(document.getElementById("student_name")); $('#student_profile *').text(''); console.log(document.getElementById("student_name")); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='student_profile'> <h1 id="student_name">Foo Bar</h1> <p id="student_id">123</p> <p id="studen_course">math</p> <p id="last_reported">2021-01-01</p> </div> <button onclick="cleardiv()">Clear</button>Si solo desea afectar a los niños directos, puede iterar los childNodes del elemento principal. Esto borrará tanto los nodos de elementos como los nodos que no son elementos, como los nodos de texto. Aquí usando el NodeList#forEach() proporcionado por el NodeList devuelto.
function cleardiv() { document.getElementById('student_profile') .childNodes .forEach((node) => (node.textContent = '')); console.log(document.getElementById('student_name')); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='student_profile'> <h1 id="student_name">Foo Bar</h1> <p id="student_id">123</p> <p id="studen_course">math</p> <p id="last_reported">2021-01-01</p> </div> <button onclick="cleardiv()">Clear</button>