SirmaXX/hideorremove.html

## hideorremove.html
<!DOCTYPE html>
<html>
<body>
<head>
  <style>
    #demo1{
      background-color: tomato;
      color: aliceblue;
      width: 150px;
      height: 150px;
    }
  </style>
</head>
<h1>The Element Object</h1>
<h2>The remove() Method</h2>

<p id="demo">İlk paragraf.</p>
<p id="demo1"><span>fakyı</span>Click "Remove1", and this paragraph will be removed from the DOM.</p>
<p id="demo2">Son paragraf.</p>
<button onclick="myFunction()">Remove</button>
<button onclick="myFunction1()">hide1</button>
<button onclick="myFunction2()">remove1</button>
<button onclick="build()">build</button>
<script>
function myFunction() {
  const element = document.getElementById("demo");
  element.remove();
}

function myFunction1() {
  const element = document.getElementById("demo1");
  element.style.visibility = 'hidden';

}

function myFunction2() {
  const element = document.getElementById("demo1");
  element.remove();
}

function build() {
 // ✅ Create element
const el = document.createElement('p');

// ✅ Set ID attribute on element
el.setAttribute('id', 'demo1');

// ✅ Add text content to element
el.textContent = 'Click "Remove1", and this paragraph will be removed from the DOM.';

// ✅ Or set the innerHTML of the element
// el.innerHTML = `<span>Hello world</span>`;

// ✅ add element to DOM
const box = document.getElementById('demo');
box.appendChild(el);

}


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<head>
	<style>
	#demo1{
	background-color: tomato;
	color: aliceblue;
	width: 150px;
	height: 150px;
	}
	</style>
	</head>
	<h1>The Element Object</h1>
	<h2>The remove() Method</h2>

	<p id="demo">İlk paragraf.</p>
	<p id="demo1"><span>fakyı</span>Click "Remove1", and this paragraph will be removed from the DOM.</p>
	<p id="demo2">Son paragraf.</p>
	<button onclick="myFunction()">Remove</button>
	<button onclick="myFunction1()">hide1</button>
	<button onclick="myFunction2()">remove1</button>
	<button onclick="build()">build</button>
	<script>
	function myFunction() {
	const element = document.getElementById("demo");
	element.remove();
	}

	function myFunction1() {
	const element = document.getElementById("demo1");
	element.style.visibility = 'hidden';

	}

	function myFunction2() {
	const element = document.getElementById("demo1");
	element.remove();
	}

	function build() {
	// ✅ Create element
	const el = document.createElement('p');

	// ✅ Set ID attribute on element
	el.setAttribute('id', 'demo1');

	// ✅ Add text content to element
	el.textContent = 'Click "Remove1", and this paragraph will be removed from the DOM.';

	// ✅ Or set the innerHTML of the element
	// el.innerHTML = `<span>Hello world</span>`;

	// ✅ add element to DOM
	const box = document.getElementById('demo');
	box.appendChild(el);

	}


	</script>

	</body>
	</html>