Any way to remove "li" directly without javascript just with onclick?

$go .="<li id=\"go_$id\"><a ondblclick=\"g('$id'); return false;\">$title</a>
             <a onclick=\"go('$id', 'g')\">(x)</a>
    </li>\n";

I need it to be removed by clicking on (x), so together with my other function (onclick function in the code) to combine the remove so that that "li" will disappear onclick.

Any way to remove "li" directly without javascript just with onclick?

$go .="<li id=\"go_$id\"><a ondblclick=\"g('$id'); return false;\">$title</a>
             <a onclick=\"go('$id', 'g')\">(x)</a>
    </li>\n";

I need it to be removed by clicking on (x), so together with my other function (onclick function in the code) to combine the remove so that that "li" will disappear onclick.

• javascript
• html

• 6 Whatever you write in onclick is essentially JavaScript. – Sedat Kapanoglu Commented Dec 11, 2010 at 14:29
• Why don't you want to use Javascript? – Karl Knechtel Commented Dec 11, 2010 at 14:31
• just to have everything in onclick – Yan Commented Dec 11, 2010 at 14:54

5 Answers 5

Use Node.parentNode to obtain the parent node and use Node.removeChild() to remove a child node. Here's the self-explanatory version of the code:

<li><a href="#" onclick="var li = this.parentNode; var ul = li.parentNode; ul.removeChild(li);">remove</a></li>

Here's a more short version:

<li><a href="#" onclick="parentNode.parentNode.removeChild(parentNode)">remove</a></li>

Here's how to use it in combination with a JS function:

<li><a href="#" onclick="remove(this)">remove</a></li>

with

function remove(link) { 
    link.parentNode.parentNode.removeChild(link.parentNode);
}

No.

Not without JavaScript.

If you chose to separate content from behavior (HTML from JavaScript), then this would work just fine (using jQuery):

$("li").click(function() { $(this).remove(); });  

Edit:

$("li a").click(function() { $(this).closest("li").remove(); }); 

However, I recommend a more specific selector - like .closeButton

function remove_item(selected_item) {
        selected_item.parentNode.removeChild(selected_item);
    }

    li {
        background: #ffe5e5;
        padding: 20px; 
        margin: 15px;
        list-style-type: decimal;
    }

<ul id="list">
        <li class="one" onclick="remove_item(this)">React</li>
        <li class="one" onclick="remove_item(this)">Node.js</li>
        <li class="one" onclick="remove_item(this)">Dart</li>
</ul>

If using IE, you can do it with VBScript.

In order to change a loaded page dynamically, you will have to use client side scripting of one kind or another (java, javascript, vbscript - depending on what browser and installed plugins).